Geek asks and answers

JQuery Mobile header fixed

Is it possible to get jQuery Mobile's fixed headers, with the line being set at the top, as in the link below?

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

If you see a link above the title, the title lights up and the title lights up and is fixed on top.

Before scrolling enter image description here

After scrolling enter image description here

Ive tried iScroll, using that I can get a fixed header, but not an effect, as in the link above. Is there a link or tutorial on this? Thank you very much for your time and help in advance.

+5
source share
2 answers

, , jQuery Mobile, , .

JQuery Waypoints, , , jsbin, :

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

, script , 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');
   }
});

, , , , , .

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

+1

More articles:


All Articles