Is it possible to get fixed headers jQuery Mobile, with a row getting set in the top as in the link below?
.htm
If you see the link above the header image goes up and the header es 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.
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..au/p/promos/Beach-Breaks.htm
If you see the link above the header image goes up and the header es 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.
Share Improve this question edited Aug 14, 2012 at 4:57 Jaya Mayu asked Aug 14, 2012 at 4:51 Jaya MayuJaya Mayu 17.3k34 gold badges115 silver badges149 bronze badges 4- this will give you a good start [how to keep jquery mobile header and footer fixed][1] [1]: stackoverflow./questions/4724068/… – rahul Commented Aug 14, 2012 at 4:54
- @rahul: Nope, it's different. – nhahtdh Commented Aug 14, 2012 at 4:56
- Unfortunately, there is nothing in jQuery Mobile that will allow you to achieve the above functionality out of the box. You can have a fixed header (resize window to make page scroll), but not one that starts halfway down the page and then bees fixed. – Jeemusu Commented Aug 14, 2012 at 5:06
- @Jeemusu I've tried many solutions getting a fixed header is easy but something like this in the example is taking the life out of me. Please do tell me if you e across anything like this – Jaya Mayu Commented Aug 14, 2012 at 5:18
2 Answers
Reset to default 3Ok, so you got me wondering about how I could implement this in jQuery Mobile as it could e 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./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.
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./mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery./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./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/Xg86Z/