4

是否有可能获得固定的标题 jQuery Mobile，在顶部设置一行，如下面的链接所示？

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

如果您看到标题图像上方的链接上升并且标题出现并固定在顶部。

向上滚动之前 在此处输入图像描述

向上滚动后 在此处输入图像描述

我已经尝试使用 iScroll 来获得固定的标题，但不能获得上面链接中的效果。有没有关于这个问题的链接或教程？非常感谢您的时间和提前帮助。

4

2 回答 2

3

好的，所以你让我想知道如何在 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');
   }
});

最好的部分是它是动态的，无论页眉在页面中的哪个位置，它都能够判断它何时到达页面顶部。

于 2012-08-14T06:07:20.790 回答
2

您可以尝试此代码。这应该可以工作。请注意，我尚未在手机浏览器中对其进行测试。如果有帮助，请告诉我。

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

于 2012-08-14T06:05:32.760 回答