Scroll Activated Slide Down Header With jQuery

/ Javascript, jQuery / by Paul Robinson / 74 Comments
This post was published back on April 9, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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:

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.


First let’s look at the HTML:

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.


Now let’s take a look at the CSS:

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.


Onto the exciting part. The jQuery:

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.


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


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.


Author’s gravatar

Hi, I am a total newbee to jquery and wordpress and everything! so i am sorry if i come across as sounding like i know nothing (which i don’t) I was looking for something like this for my website. I allready have a theme and the header has a bar up the top. I don’t no how to edit this bar. But i really want to apply your code to it so that it appears when the scrolled down. I was looking for code that would roll down on mouse rollover, but this is the best I could find. I was wondering if you could help me, and be willing to dumb it down enough for me considering my lack of knowledge and experience.


Author’s gravatar author

Hi Jesse,

I’m not sure I would be able to explain with any more detail than I have.

I am very happy to try and guide you through it via email if you get in touch via the contact form, or if you prefer I am also available for hire.

Author’s gravatar

This is nice demo which will helpful me…Thanks a lot..
Go ahead..

Author’s gravatar

Hi there

Im trying to use your lovely animated header once i scroll on my site but…

Im having trouble with it on iPad, sometimes it works sometimes it doesn’t.

It seems to have trouble when returning to the top of the page, the nav (which im animating on to the page) just stays there and does not return.

Have you had this problem reported before at all?

Either way hope you can shed some light on this, kind of getting annoying now 🙂

Look forward to your response.

Author’s gravatar author

Hi Anthony,

Unfortunately I haven’t come across this problem before. I’ve checked out the demo on my iPad (Retina) and I can’t seem to replicated it. I’m happy to try and help out if you’d be able to let me look at the problem.

I understand you may not want to publicly share the address if your site is in development if so please feel free to email me & I’ll see if I can help out. 🙂

Author’s gravatar

Hello! I was wondering if you are still “thinking” about this tutorial, because I followed it and it works the way you described, I just have a question about a small problem I have with it, when I scroll down, some text gets in front of the menu, overlapping both div… the one from the page, and the one from the slide down header. Like some sort of transparency I cannot control.

Thank you,

Author’s gravatar

Hi I have been trying to get this working for WordPress, but unfortunately I failed.
I’m particular new into Jquery and I can’t find the proper way to reference and add the jquery script to the WordPress install. Thus being unable to get this nice feature working.
Could you help me out, how to place the Jquery properly in a WP header file, to get this thing rocking?

Author’s gravatar author


You can attach the script by adding it directly to the header.php theme file, but I would advise that you use wp_enqueue_script(). Try my tutorial I wrote on hooks & filters, which covers the correct way to enqueue scripts.

If you need an further help please comment on that tutorial & I’ll try to help with that.

Author’s gravatar


So when I copy paste your code and edit it for WordPress to:

and save it as header2.js, and put it in the themes -> js folder.

Now adding this in the header.php above :

Would that be the right settings to have this working?

Author’s gravatar author


Apologies for the delay, I’ve been a little ill over the last week or two & have been concentrating on working.

That’s close, but not quite correct. The code would be:

Let me know if you have any questions about the code.

Author’s gravatar

If you didn’t want to have a set height for the bar you could:

… and the javascript becomes:

Which makes this more flexible.

Nice work.


Author’s gravatar

Nice tutorial, when i type a sentence in #headerSlideContent and i preview it ders an overflow the header comes out a bit before i scroll, how can i fix this…

Admin Edit: Some of your comment was eaten by WordPress as it doesn’t really play nice with code in comments, you can try wrapping it in code tags with a class of language-lang and it should display nicely.

Author’s gravatar author

Hi Rabiu,

As mentioned the code you provided was garbled by WordPress. I’m guessing you mean that your content overflows out of your header?

That is because this sliding header has a fixed height and so if the content is larger it spills. You can fix it by either making the header larger in both the CSS & the jQuery code, or you can set the overflow to hidden in the CSS. If you choose the second option though your content will just be clipped.

If you don’t want a fixed height you could use the code shared by James just above your comment. I am planning to redo many of my older tutorials since the new site facelift so look out for improved versions very soon.

Hope that helps.

Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more