Facebook Style Scroll Fixed Header in JQuery

by Viral Patel · 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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

Demo

Download

Tags: facebook header JQuery JQuery Events mouse scroll event

49 Comments

hh says:
11 January, 2012, 18:49
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.
Reply
- Viral Patel says:
  11 January, 2012, 21:25
  @hh: Opps, well catch :)
  I fixed this issue and updated the tutorial. Thanks for the feedback.
  Reply
PHANI says:
12 January, 2012, 4:23
in IE8 its not working.
Reply
Paras says:
13 January, 2012, 15:31
Please tell,
How to run this?
Reply
chris says:
19 January, 2012, 23:48
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?
Reply
Carol says:
2 February, 2012, 21:54
You could acheive the same by simply using #header{‘position:fixed’} in CSS.
Reply
- andre says:
  8 February, 2012, 22:32
  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
  Reply
- manoj kumar says:
  17 November, 2012, 19:17
  no ! It’s different things.
  Reply
- devhaa says:
  8 September, 2013, 7:45
  Nope, you cannot achieve the same results with CSS. You can make it work with CSS only if the content that needs to be fixed is at the top of the page already; otherwise it will mess up your layout.
  Reply
ravi says:
21 February, 2012, 13:23
not able to see demo in FF11
Reply
john says:
19 March, 2012, 19:32
why not use css??
Reply

Sean P. O. MacCath-Moran says:

24 April, 2012, 23:11

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 &gt; data.start) {
          css['position'] = 'fixed';
          css['top'] = '100px';
        } else {
          css['position'] = 'static';
          css['top'] = '0px';
        }
        $(sticky).css(css);
      });
  });
  
}

Jibin says:
12 May, 2012, 23:10
The demo button is not working
Reply
- Viral Patel says:
  12 May, 2012, 23:38
  @Jibin – Thanks for pointing this out. Seems the demo file is accedently deleted. I ll fix this right away.
  Reply
ben says:
30 May, 2012, 14:56
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?
Reply
salvatore says:
10 June, 2012, 14:05
What about using jquery cookies for implementing closing windows (like close this forever)? Could be useful for the most of visitors!
Reply
Klick_arie says:
25 June, 2012, 7:46
I will try this,,, hehehe thank’s for share
Reply
Chirag Gurjar says:
27 June, 2012, 11:38
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
Reply
Eeshan Ag says:
28 June, 2012, 13:17
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.
Reply
sonu patel says:
4 July, 2012, 8:45
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
Reply
sonu patel says:
4 July, 2012, 9:08
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
Reply
sonu patel says:
4 July, 2012, 9:18
sorry for the trouble ….i have corrected it..
great help with the code
Thank you once again
Reply
Samarth Chawla says:
17 July, 2012, 19:03
Y U NO use CSS?
Reply
MarcK says:
8 September, 2012, 10:47
Why not just use css { position:fixed }? Has the same effect with less code and does not blink.
Reply
Osama Mursleen says:
19 September, 2012, 12:04
not working in IE9, kindly help.
Reply

siddhartha says:

3 October, 2012, 17:44

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)&gt;start) ? 'fixed' : 'static');
                    $elem.css('top',((p)&gt;start) ? '0px' : '');
                    $elem.css('z-index','10000');
                    $elem.css('visibility','block');
                }); 
});

Miomir says:
13 October, 2012, 3:17
Here i have problem, when i have inside body some fixed element, when i scroll header goes over it?
Reply
Mohamed says:
13 October, 2012, 20:26
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 >>>
Reply
Dhananay Kumar says:
16 October, 2012, 16:25
Its nice to know but use css. It’s so simple and so easy to learn. Thanks for sharing all views…
Reply
Arvind says:
17 October, 2012, 18:22
this header does not remain fixed in IE 8 and IE 9. Any one could help?
Reply
Hung says:
27 October, 2012, 18:03
not working in IE9
Reply
szed says:
31 October, 2012, 13:38
Not working on IE9…
Anyone ?
Reply
HifzurRahman says:
9 November, 2012, 10:10
good job,this blog helps me a lot..thanx
Reply
Raza says:
29 November, 2012, 19:24
Hi,
Your code isn’t running when Header div is used in side AJAX Update Panel. Any solution?
Reply
Kamal Singh says:
31 January, 2013, 4:13
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!
Reply
Mayank says:
7 February, 2013, 9:43
wow brilliant nice work i really appreciate this. keep it up.
Reply
pratiksha says:
25 March, 2013, 11:47
this code is not workin in IE9 nor is the scroll with mouse working
Reply
future multimedia says:
23 April, 2013, 11:00
coool article i m happy
Reply

robbin says:

4 November, 2013, 12:38

Thanks for your code.

I found there is an problem when scroll near the fixed-bar, a small shake, because when you set the fixed-bar fixed, and then the body html will be shorter than before, so I fixed this problem and share here.

var div = $('#header');
if(div.size()) {
    var placehoder  = $('<div>').hide();
    div.after(placehoder);
    
    var start = $(div).offset().top;
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        //console.log(start,p);
        if (p > start) {
          placehoder.height(div.height()).show();
        } else {
          placehoder.hide();
        }
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });
  }

Rahat says:
22 January, 2014, 18:41
Hello.
My Header is centralized. like:
```
#header {
	height: 90px;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color:white;
}
```
So problem is: When i scrolling page my header is aligning to left side of window. How can i fix this problem?
Thanks.
Reply
- James Kaneshiro says:
  7 June, 2014, 19:18
  @Rahat
  Why not try out
```
#header {
    height: 90px;
    width: 1000px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px;
    background-color:white;
}
```
  This will keep the header centered while having the header stay at the top. Then in jQuery you can have it check for the position of the scroll and if you like make the header fade out after a certain position.
  I did something similar but it is kind of the opposite. I didn’t want a logo to appear until it past a certain point of the scrollbar.
  Reply

Jiten says:

30 April, 2014, 19:54

Hi Viral..
I have a page with header,footer, left panel and main content in for part as following

<table style="width: 100%;" border="1">
	<tr style="height: 20%;">
		<td colspan="2"><div id="header-div" style="width: 100%;"></div></td>
	</tr>
	<tr style="height: 60%;">
		<td style="width: 13%;" valign="top"><div id="sidebar-div" style="width: 100%;margin-top: 1px;top: 1px;"></div></td>
		<td style="width: 87%;"><div id="mainContent-div" style="width: 100%;"></div></td>
	</tr>
	<tr style="height: 20%;">
		<td colspan="2"><div id="footer-div" style="width: 100%;"></div></td>
	</tr>
</table>

I want to fix header footer and left panel. only main content is not fixed and scrollable.

I dont have depth knowledge on script side.

Can you please help to do same..

Thanks in advance… :)

James Kaneshiro says:

7 June, 2014, 19:52

Why not set your mainContent-div to “overflow:auto” and the rest of the divs to “position:fixed”

And instead of using tables it can be set up like:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
    width:100%;
    height:100%;
}
#container {
	width:100%;
	background:#FFF;
}
#header {
	width:100%;
    height:20%;
    position:fixed;
}
#sidebar {
	width:13%;
    height:60%;
    position:fixed;
    top: 20%;
    left:0;
}
#content {
	width: 87%;
    height: 60%;
	position:fixed;
    overflow:auto;
    top:20%;
    right:0;
}
#footer {
	width:100%;
    height:20%;
	position:fixed;
    left:0;
    bottom:0;
    }
</style>
</head>
<body>
<div id="container">
    <div id="header"></div><!-- end #header -->
    <div id="sidebar"></div><!-- end #sidebar -->
    <div id="content"></div><!-- end #content -->
    <div id="footer"></div><!-- end .footer -->
</div><!-- end .container -->
</body>
</html>

Rahmat says:
31 December, 2014, 8:41
Very helpful. Thanks…
Reply
shah says:
18 February, 2015, 2:20
interesting article working fine, thanks for sharing
Reply
Apni PSP says:
5 August, 2015, 18:37
Informative Post
Reply
expertx says:
28 July, 2017, 15:56
Thank you very much for providing us such a great Post.
Reply
Rohit says:
20 December, 2018, 15:38
Hello,
Well explained without confusion. Keep sharing thanks.”
“Well, explained and informative. Really this blog is helpful to me.
Reply
tech forest says:
7 January, 2021, 2:26
Amazing Blog Thank you for sharing
Reply

Facebook Style Scroll Fixed Header in JQuery

The HTML

The JQuery

Online Demo

You may also like...

49 Comments

Leave a Reply Cancel reply

Facebook Style Scroll Fixed Header in JQuery

The HTML

The JQuery

Online Demo

You may also like...

Dynamically Add/Remove rows in HTML table using JavaScript

Changing Form Input (Textbox) Style on Focus using jQuery

Delete Row from HTML Table by clicking it using jQuery

HTML5 Geolocation API Tutorial with Example

49 Comments

Leave a Reply Cancel reply