Header changes as you scroll down (jQuery)

Question

TechCrunch recently redesigned their site and they have a sweet header that minifies into a thinner version of their branding as you scroll down.

You can see what I mean here: http://techcrunch.com/

How would I go about creating something like this? Is there a tutorial anywhere and if not, can one you kind souls give me some tips on where to start? :)

Answer 1

It's not too hard, it's just a simple .scroll() event. I can't seem to do it in fiddle because of the way the panels are positioned Check EDIT!. But basically what you have is have a div on the top that is position: absolute so it's always on top, then use .scroll()

$("body").scroll( function() {
    var top = $(this).scrollTop();
    // if statement to do changes
});

The scrollTop() method is used to determine how much the body has scrolled.

And depending on where you would like to change your header div, you can have your if statement do many things. In the case of the example you provided, it would be something like

if ( top > 147 )
    // add the TechCrunch div inside the header
else
    // hide the TechCrunch div so that space is transparent and you can see the banner

EDIT

Yay! I was able to make this fiddle to demonstrate the example! :)

Good luck!