Facebook Style Scroll Fixed Header in JQuery
- By Viral Patel on January 11, 2012
While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.
Now for this, there are number of jQuery plugins available out there! But in our case we weren’t allowed to add any new plugins to the technology stack of application (I know it sucks 
). So here is a small JQuery based solution to make a DIV of header fixed on top of the screen while scrolling.
Related: Mouse Scroll Events in JQuery
The HTML
Below is the HTML code. It contain a simple div #header which we want to freeze at the top. Note that we have included JQuery directly from jquery.com site (In my application we have included older version of jquery from out tech stack).
<HTML> <HEAD> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <title>Scroll Fixed Header like Facebook in JQuery - viralpatel.net</title> </HEAD> <BODY> <div id="header"> <h1>Scroll Fix Header like Facebook in JQuery</h1> </div> <p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p> <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p> <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p> <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p> </BODY> </HTML>
In above HTML, we added few lines “Some dumb text to add…” just to make page scrollable.
The JQuery
The JQuery code is pretty straight forward. Take a look:
<SCRIPT>
$(document).ready(function() {
var div = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>
We have added an event listener to “scroll” event. This handler function gets called each time scroll event is fired in browser.
Now we select the header element (highlighted in above code) and simply do some position stuff. We make the header div’s position fixed of static depending upon the state of scroll position. Also the top attribute is set to 0px in case we want to make it fix, when page is scrolled down.
Online Demo
Get our Articles via Email. Enter your email address.
hi, i looked your demo page using chrome 16.
if you scroll slowly enough like one step per scroll, header disappears then with next scroll it shown. and you cant scroll to the end of screen to see copyright section, js code moves page one scroll step up.
so i think this mini plugin is not eligible to use.
@hh: Opps, well catch
I fixed this issue and updated the tutorial. Thanks for the feedback.
in IE8 its not working.
Please tell,
How to run this?
Very cool – I’ve put it on my site. Was wondering if you know of a way to make the header not “jump” during the initial scroll?
You could acheive the same by simply using #header{‘position:fixed’} in CSS.
agree using this “plugin” is simply waste of time and stupid
or
maybe what he means by “we weren’t allowed to add any new plugins to the technology stack of application” is css lol
no ! It’s different things.
not able to see demo in FF11
why not use css??
Thank you for this!
Here’s a more generic implementation. I made this in thecontext of Drupal, so am using a readily available object there for a storage bin, but this same technique should be easy to implement using other locations for storage:
function setup_sticky_elements() { Drupal.settings['_sticky'] = $('.sticky'); $.each(Drupal.settings._sticky, function(s, sticky) { var start = (temp = $(this).attr('stickyat')) ? temp : 100; start -= 15; // don't know why this is needed, but somethig was bumping it by 15, sooo... start = $(sticky).offset().top - start; $(sticky).data({ 'sticky': { 'start': start } }); }); $.event.add(window, 'scroll', function() { $.each(Drupal.settings._sticky, function(s, sticky) { var data = $(sticky).data('sticky'); var p = $(window).scrollTop(); var css = {}; if (p > data.start) { css['position'] = 'fixed'; css['top'] = '100px'; } else { css['position'] = 'static'; css['top'] = '0px'; } $(sticky).css(css); }); }); }The demo button is not working
@Jibin – Thanks for pointing this out. Seems the demo file is accedently deleted. I ll fix this right away.
my header div increases its width by around 20% to the right upon scrolling the first time on FF12.0 and ie9. why is this and how do i keep the original size intact?
What about using jquery cookies for implementing closing windows (like close this forever)? Could be useful for the most of visitors!
I will try this,,, hehehe thank’s for share
Hi,
I am trying to implement this fixed header with 80% width but does not keep 80% width through out it is increased automatically to 100%. can you let me know ? why ?
Thanks,
Chirag
Hi there, I was wondering if you could help me out with the code for how you’ve done your current websites header. Just like the positioning on your header changes from static to fixed, how can I implement the same for my website.? Thank you.
hi
i tried the above code but the header didnot remained fixed and moved and also there was gap between the top and left margin…
please help
hello once again,
i was implementing these codes visual studio 10 in ASP.NET…
however when i tried to do in normal html file the header was fixed but there were marginal gap between the four sides of header…
please help
sorry for the trouble ….i have corrected it..
great help with the code
Thank you once again
Y U NO use CSS?
Why not just use css { position:fixed }? Has the same effect with less code and does not blink.
not working in IE9, kindly help.
You have done great Job dear. I have done this with jqxgrid. I have asked to their support team they told me this is not possible but i tried your example with little modification with z index and visiblity css and i have achieve this. my modification is like this:
$(document).ready(function () { var $elem = $('.jqx-grid-header'); // Original element with attached data var start = $elem.offset().top; $(window).scroll(function(){ var p = $(window).scrollTop(); $elem.css('position',((p)>start) ? 'fixed' : 'static'); $elem.css('top',((p)>start) ? '0px' : ''); $elem.css('z-index','10000'); $elem.css('visibility','block'); }); });Here i have problem, when i have inside body some fixed element, when i scroll header goes over it?
Hello Dear….
plz. help me
is exmple very good..
i want make padding if start fiexd div after scrollbar >>
note: i want padding from bottom this div fiexd >>>
Its nice to know but use css. It’s so simple and so easy to learn. Thanks for sharing all views…
this header does not remain fixed in IE 8 and IE 9. Any one could help?
not working in IE9
Not working on IE9…
Anyone ?
good job,this blog helps me a lot..thanx
Hi,
Your code isn’t running when Header div is used in side AJAX Update Panel. Any solution?
hello there. As I can see you are using WordPress theme. I just want a header something like on your website… A header which will stick to top of the page after scrolling a bit.. please help
As I am not a techie. just a beginner. would love if you can provide the full codes to make this happen. thanks in advance!
wow brilliant nice work i really appreciate this. keep it up.
this code is not workin in IE9 nor is the scroll with mouse working
coool article i m happy