Update: 17/08/2010

After a little bit of work I have fixed the bug that caused the header to break. I have changed the tutorial below to reflect the changes. Please read through it again if you have already used the code & change the necessary parts.

Yesterday via Twitter, I received a request for a tutorial. It was to make a slide down header, similar to that of the slide up footer I posted yesterday. However this one had a very interesting twist. Here is the tweet:

You should write a tutorial on how to make a sticky header, like here: http://www.scienceblog.com/cms/index.php

The header (bar thing) that scienceblog have is interesting because it doesn’t appear until you scroll a certain distance down the page. So let’s see if we can create something like it. As always my design abilities are shocking, but all the code is there & most importantly it works.

HTML

First let’s look at the HTML:

<div id="headerSlideContainer">
	<div id="headerSlideContent">
		Header content goes here!
	</div>
</div>

Heh. Not really anything to write home about is it. We have a container, this allows us to stretch the header to the full page width. Then we have a content container, this allows us to center our content in a smaller area while the header still stretches the full page width.

CSS

Now let’s take a look at the CSS:

#headerSlideContainer {
	position: fixed;
	top:-50px;
	width: 100%;
	background: black;
}
#headerSlideContent {
	width: 900px;
	height: 50px;
	margin: 0 auto;
	color: white;
}

Let’s have a look here. We set our container to be positioned fixed with a position set to the same as the height you plan to use for the content element but negative. So if your #headerSliderContent is 100px high you will need to set the position at -100px.

We set it’s width to 100% (the full page width). Also we set our background to black, feel free to go wild with that.

The content area is simple. We have a width of 900 pixels, a height of 50px and a margin to center it. You’ll probably want to customize all that though. The color is just so the text is visible on our black background. Again you’ll probably want to customize it.

jQuery

Onto the exciting part. The jQuery:

$(function() {
	var bar = $('#headerSlideContainer');
	var top = bar.css('top');
	$(window).scroll(function() {
		if($(this).scrollTop() > 50) {
			bar.stop().animate({'top' : '0px'}, 500);
		} else {
			bar.stop().animate({'top' : top}, 500);
		}
	});
});

Hold on to your hats people. First we open a standard on DOM ready. Next we tie a scroll event to the window. Why the window? Well we need to slide down our header if the page scrolls below a certain position, to do that we need to monitor the windows scroll position. Next, because it makes things quicker, we assign the jQuery object for our header container into a variable. We also store the current top position we set in the CSS earlier.

Now if this, which refers to the window, has a scroll position greater than 50 (feel free to customize), we tell the bar (our header) to animate the top position to 0px. Because our position is set to fixed 0px will always be the correct position to show the header fully. stop() tells jQuery not to queue animations so it becomes more responsive & doesn’t break if someone abuses it with lots of scrolling.

If our scroll position isn’t greater than 50 we need to hide the header. To do this we just animate the header back to it’s original position using the variable top we set earlier. The reason I have used a variable is so that you don’t have to edit the jQuery at all, you can if you like to change the scroll height & animation timings, but there is no need to. Just remember to set your negative top position in your CSS or it won’t work.

Example

I know you all like to see an example. It’s not very pretty, but like I said, I’m rubbish at design. I just do the coding. The design is up to you.

Done!

There we have it. A scroll activated sliding header. There is, of course, the problem that if your page isn’t high enough your scroll position will never pass the required number and as such the header will never show.

Let me know if you can think of any alternative actions to take should the page not scroll & I’ll add them on to the tutorial. As always, I hope you enjoyed this tutorial, if you have any questions or comments leave them below or drop me an email using the contact page.