修复了标头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