Take the 2-minute tour ×

I want to make a header which will change on scroll event exactly like in this site. When cursor is on top of the page header will appear differently. When scroll down, header content will change and be fixed.

I've found these examples (and many others) but they only shrink and becomes fixed, header content doesn't change at all.

Note: If possible, something with no 3rd party packages which slows down the page when loading, like many js files.


  1. Sticky header on scroll with jQuery and CSS
  2. Persistent Headers


window.onscroll=function ()
   //Based on given offset like 100px maximum
   if (scroll == down)
     //Display header_2 as fixed header
     //Display header_1 as fixed header


<div class="container">
   <div id="header_1">BIG HEADER with no menu</header>
   <div id="header_2">SMALL HEADER with menu only</header>
share|improve this question
Your question is not clear at all. You want to make the header fixed + change it's content? What have you tried so far? It should be relatively easy to add the code in the according scroll handler. –  Christoph Jun 11 '13 at 10:09
What you understood is correct. Everything I tried just shrinks in height. If I can find something that changes whole content of header then I can update it based on my design requirements. I just need the basic one for starting point. –  inanzzz Jun 11 '13 at 10:12
In the first demo example site, it adds a class of "stuck" to the navigation when you scroll down, and then removes it when it becomes unstuck. So you can target that with Javascript/jQuery to show more content and modify the CSS accordingly. –  Nick R Jun 11 '13 at 10:18
I uses 2 more js files which potentially slow the page down. –  inanzzz Jun 11 '13 at 10:23

3 Answers 3

up vote 2 down vote accepted

The trick consist on checking current scroll position. This example would set content A or B to header depending on the scroll position (below 200px).

        if($(document).scrollTop() > 200) //
           //Set content B to header
        } else {
           //Set content A to header

I have not been able to test this code so it might have bugs, but its goal is to give you a clue. Also, before changing the content, you should check if it has been done already.

Hope it helps!

share|improve this answer
Exactly what I wanted. Thank you. –  inanzzz Jun 11 '13 at 11:06

Something like this:

        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top add fixed position css to element
            $("#menu1").css('display', 'none');
            $("#menu2").css('display', 'block');

        } else {
        // otherwise reset the css.
            $("#menu2").css('display', 'none');
            $("#menu1").css('display', 'block');

share|improve this answer
I used your code between if and else statement to complete Alfonso's solution so you deserve credit too. Thank you –  inanzzz Jun 11 '13 at 11:07

I don't know if I got your question right. But this will display a fixed Menu which will become sticky if you scroll down

var menu = $('#menu');
var menuOffset = menu.position().top; //original position of the menu

$(window).scroll(function() {
 if ($(window).scrollTop() > menuOffset + 40) {
                                menu.css({position: 'fixed'});
                                menu.css({ top:0 });
                    } else {
                                menu.css({ top: menuOffset });
                                menu.css({position: 'static'});
share|improve this answer

Your Answer


