Question

i want to acheive this effect

Notice when you scroll down how the header stays fixed but also changes a bit. How can I do that?

I know how to do it with CSS but want to add more style to the header.

Answer 1

Just view the source of the page:

$(window).scroll(function(){
    if ( $('div.wrapper').width() >= 660 ) {
        if ( $(this).scrollTop() > pos.top+header.height() && header.hasClass('default') ) {
            header.fadeOut('fast', function(){
                $(this).removeClass('default').addClass('scrolling').fadeIn('fast');
            });
        } else if ( $(this).scrollTop() <= pos.top+header.height() && header.hasClass('scrolling') ) {
            header.fadeOut('fast', function(){
                $(this).removeClass('scrolling').addClass('default').fadeIn('fast');
            });
        }
    }
});​

There is a scroll listener and when the event occurs – the class of the menu is getting toggled between .default and .scrolling