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).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<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.
Rz Rasel 
i like what you’ve done
I’ve said that least 2708209 times. SCK was here
I haven’t checked in here for a while as I thought it was getting boring, but the last few posts are good quality so I guess I’ll add you back to my daily bloglist. You deserve it my friend 🙂
Some truly fantastic articles on this website, thank you for contribution.
Shareyt – Your Social Sharing Hub! Social media marketing simplified http://my-crazylife.com/shareyt improve social media presence for FREE
I will immediately grab your rss feed as I can not find your e-mail subscription link or e-newsletter service. Do you’ve any? Kindly let me know in order that I could subscribe. Thanks.
I really appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thx again!
Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is wonderful, as well as the content!
I do agree with all of the ideas you have presented in your post. They are very convincing and will definitely work. Still, the posts are too short for starters. Could you please extend them a little from next time? Thanks for the post.
Hi, i must say fantastic site you have, i stumbled across it in Yahoo. Does you get much traffic?
I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a great blog like this one nowadays
Thanks for the good writeup. It in fact used to be a enjoyment account it. Look complex to far brought agreeable from you! However, how could we keep in touch?
all the time i used to read smaller posts which also clear their motive, and that is also happening with this article which I am reading now.
Les annonces sont gratuites sur Portail2000.com/ venez mettre votre annonce sur portail2000, l’inscription est gratuit.
Petites annonces gratuites d’occasion Portail2000.com/ des annonces immobilières, voitures et bien plus encore .
I simply want to say I’m new to weblog and definitely enjoyed you’re web blog. More than likely I’m planning to bookmark your site . You really come with wonderful writings. Regards for sharing with us your website.