How to shrink navigation menu when scrolling down?

Question

For a new site I am developing I would love to shrink the navigation menu when the user scrolls down.

Something similar to what you can see at the IBM site: http://w

Answer 1

What you do is check the scroll value of the window. If it is greater than zero then the user has scrolled down. If so then hide the banner (or shrink or whatever). If they go back to the top then reshow it.

http://jsfiddle.net/rxXkE/

$(window).scroll(function () { 
console.log($(window).scrollTop());
if ($(window).scrollTop() > 0) {
    $(".banner").slideUp();
}
else {
     $(".banner").slideDown();   
}

});