固定頭jQuery Mobile的

是否有可能得到固定頭jQuery Mobile的，有一排得到的頂部設置爲下面的鏈接？固定頭jQuery Mobile的

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

如果你看到標題圖片上面的鏈接上升和頭部來了，搞定了頂部。

之前向上滾動 enter image description here

向上滾動 enter image description here

我使用，我可以得到固定的頭，但沒有效果，如上面的鏈接試圖iScroll後。有關於此事的鏈接或教程？非常感謝您的時間和事先幫助。

2012-08-14 Jay Mayu

這會給你一個良好的開端 [如何讓jQuery Mobile的頁眉和頁腳的固定] [1] [1]：http://stackoverflow.com/questions/4724068/如何對保jQuery的移動報頭和頁腳固定 – rahul 2012-08-14 04:54:03

@rahul：不，這是不同的。 – nhahtdh 2012-08-14 04:56:47

不幸的是，jQuery Mobile中沒有任何東西可以讓你實現上述功能。你可以有一個[固定頭（http://jsbin.com/iyowog/1/）（***調整窗口大小，使頁面滾動***），但沒有一箇中途開始了網頁，然後會變成固定。 – Jeemusu 2012-08-14 05:06:10

好了，你讓我想知道我怎麼能實現這個在jQuery Mobile的，因爲它可以派上用場的一個項目，我的工作。

使用JQuery Waypoints，它可以檢查時，某些元素命中頁面的頂部，和哪個方向的頁面在那一刻滾動。我已經設置了以下jsbin向您展示一個可能的解決方案：

http://jsbin.com/iyowog/3/edit

航點代碼非常簡單，只需在您的網站底部的腳本，你收身的標籤之前。然後您可以用.waypoint()初始化插件。在我的示例中，我使用了以下代碼，當您向下滾動時修復了標題，並在您再次滾動回到原始點時解除修正。

$('#header').waypoint(function(event, direction) { 

    if (direction === 'down') { 
     $('#header').attr('data-position', 'fixed'); 
     $('#header').addClass('ui-header-fixed'); 

    } else { 
     $('#header').attr('data-position', ''); 
     $('#header').removeClass('ui-header-fixed'); 
    } 
});

最好的部分是，它是動態的，不要緊，標題是頁面內它就能當它擊中頁面頂部告訴。

來源

2012-08-14 06:07:20 Jeemusu

你可以試試這個代碼。此應該work.Please注意，我不是在手機測試了它browser.Let我知道是否有幫助。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).on("pageshow","#page",function(){ 
      $(this).css("top","100px"); 
      $(".ui-header-fixed").css("position","absolute"); 
     }) 

     $(window).scroll(function(event){ 
      if($(window).scrollTop() >= 100){ 
       $(".ui-header-fixed").css("position","fixed"); 
      } 
      else{ 
       $(".ui-header-fixed").css("position","absolute"); 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 
<body> 
<div style="height:100px;background-color:#ccc"></div> 
<div data-role="page" id="page"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" style="height:1500px;">  
     <p>Lorem ipsum dolor</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

一個here演示 - http://jsfiddle.net/Xg86Z/

來源

2012-08-14 06:05:32 user700284

固定頭jQuery Mobile的

回答

相關問題