Facebook Style Scroll Fixed Header in JQuery

Facebook Style Scroll Fixed Header in JQuery

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.

Online Demo

Advertisements

16 comments on “Facebook Style Scroll Fixed Header in JQuery

  1. 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 🙂

  2. 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.

  3. 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.

  4. 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

  5. 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.

  6. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s