drupal 7 , drupal 6 solutions
drupal 7 , drupal 6 solutions, we are here for drupal solutions
Tuesday, February 26, 2013
Fixed Header jQuery Mobile on top when i scroll the page
Fixed Header jQuery Mobile on top when i scroll the page
http://adf.ly/732311/pkflower.com
Fixed Header jQuery Mobile
<!DOCTYPE html> <html> <head> <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 src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script> $(document).on("pageshow","#page",function(){ $(this).css("top","100px"); }) $(window).scroll(function(event){ if($(window).scrollTop() >= 100){ $("#menu").css("position","fixed"); } else{ $("#menu").css("position","absolute"); } }); </script> <style> #menu{ height:50px; background-color:red; width:100%; line-height:8px; text-align:center; top:0; } </style> </head> <body> <div data-role="page" id="page"> <div id="menu" > <h1> Page Title</h1> </div> <!-- /header --> <div data-role="content" style="height:1500px;"> <p> Lorem ipsum dolor</p> </div> <!-- /content --> </div> <!-- /page --> </body> </html>
No comments:
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment