• Tweet

In this tutorial we will create sticky header that is initially on its original place above the content, but as soon we start scrolling down the long page, it sticks at the top of the page. When scrolling up the page, the sticky header stops sticking and returns to its original position. We will use jQuery to create the sticky header.

HTML:

The HTML structure is very simple. We have have a header which will be sticky and the content area below it. Everything is wrapped inside the container div.

<div id="container">

	<h2>jQuery Sticky Header Demo</h2>

	<div id="header">
		<!-- header content -->
	</div>

	<div id="content">
		<!-- main content -->
	</div>

</div>

CSS:

Here’s some basic CSS. It is important to specify the width of the header.

#container {
	width: 960px;
	margin: 5em auto;
	text-align: left;
}

#header{
	width:958px;
	border:1px solid #ebebee;
	border-bottom:3px solid #ddd;
	background-image: -webkit-linear-gradient(top, #fff, #ebebee);
	background-image:    -moz-linear-gradient(top, #fff, #ebebee);
	background-image:     -ms-linear-gradient(top, #fff, #ebebee);
	background-image:      -o-linear-gradient(top, #fff, #ebebee);
  	background-image:         linear-gradient(top, #fff, #ebebee);
}

#content{
	padding:10px;
	border:1px solid #e8e8e8;
	border-bottom:3px solid #e8e8e8;
	border-top: none;
	border-radius:4px;
	background:#fcfcfc;
	margin:20px 0;
}

jQuery:

At first we need to determine top offset of the header so that we can check if the page has been scrolled enough to stick the header.
We can find the header top offset by:

var HeaderTop = $('#header').offset().top;

The offset() method allows us to retrieve the current position of an element relative to the document. With the .offset().top we can find the position of header from the top.

Now we have header top offset, we need to find the window scroll position and then compare that with the header offset. As long as the page scroll position is less than the header offset, the header should keep its original place, otherwise it should change its original position and stick at the top of the page.

We can bind a function with the jQuery scroll() event of the window.

$(window).scroll(function(){
    if( $(window).scrollTop() > HeaderTop ) {
        $('#header').css({position: 'fixed', top: '0px'});
    } else {
		$('#header').css({position: 'static'});
    }
});

$(window).scrollTop() gets the vertical scroll position of window. If it exceeds the header top offset, it sets the CSS property to the header by adding position:fixed and top:0.
As soon as $(window).scrollTop() drops below the offset,  it changes position of header to the original by setting CSS position:static. The static position is the default position of an element.

That’s all. Here’s the complete jQuery code:

<script type="text/javascript">
$(document).ready(function(){
    var HeaderTop = $('#header').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > HeaderTop ) {
            $('#header').css({position: 'fixed', top: '0px'});
        } else {
            $('#header').css({position: 'static'});
        }
    });
});
</script>