修復了標頭jQuery Mobile

Question

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

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

如果您看到標題圖像上方的鏈接上升，標題出現並在頂部固定。

在向上滾動之前 在此輸入圖像描述

向上滾動后 在此輸入圖像描述

我已經嘗試使用iScroll，我可以獲得固定的標題但不是上面的鏈接中的效果。 這件事有什么鏈接或教程嗎？ 非常感謝您的時間和提前幫助。

Answer 1

你可以嘗試這個代碼。這應該工作。請注意，我沒有在手機瀏覽器中測試它。讓我知道這是否有幫助。

<!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>

這里有一個演示 - http://jsfiddle.net/Xg86Z/

Answer 2

好的，所以你讓我想知道如何在jQuery Mobile中實現它，因為它可以在我正在開發的項目中派上用場。

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

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

航點代碼非常簡單，只需在關閉body標簽之前將腳本包含在站點底部。 然后，您可以使用.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');
   }
});

最好的部分是它是動態的，無論頁面在頁面內的哪個位置都可以告訴它何時到達頁面頂部。

修復了標頭jQuery Mobile

問題描述

2 個解決方案

解決方案1
2 2012-08-14 06:05:32

解決方案2
2 已采納 2012-08-14 06:07:20

修復了標頭jQuery Mobile

問題描述

2 個解決方案

解決方案1 2 2012-08-14 06:05:32

解決方案2 2 已采納 2012-08-14 06:07:20

解決方案1
2 2012-08-14 06:05:32

解決方案2
2 已采納 2012-08-14 06:07:20