Fixed Header jQuery Mobile

问题

Is it possible to get fixed headers jQuery Mobile, with a row getting set in the top as in the link below?

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

If you see the link above the header image goes up and the header comes and getting fixed on the top.

Before scrolling up

After scrolling up

I’ve tried iScroll using that I can get the fixed header but not the effect as in the link above. Is there any link or tutorial on this matter? Thanks a lot for your time and help in advance.

回答1:

Ok, so you got me wondering about how I could implement this in jQuery Mobile as it could come in handy in a project I'm working on.

Using JQuery Waypoints, it's possible to check when certain elements hit the top of the page, and which direction the page was scrolling at that moment. I have set up the following jsbin to show you a possible solution:

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

The waypoints code is very simple, just include the script in the bottom of your site before you close the body tag. You can then initialize the plugin with .waypoint() . I used the following code in my example, which fixes the header when your scrolling down, and unfixes it when you scroll back up past its original point again.

$('#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');
   }
});

Best part is that it's dynamic, doesn't matter where the header is within the page it will be able to tell when it's hitting the top of the page.

回答2:

You can try this code.This should work.Please note that i have not tested it out in a mobile phone browser.Let me know if that helps.

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

A demo here - http://jsfiddle.net/Xg86Z/

来源：https://stackoverflow.com/questions/11945966/fixed-header-jquery-mobile

标签

javascript

jquery

css

jquery-mobile

header