jquery - CSS/Jquery 固定ヘッダー + 変更

Question

この効果を出したい

下にスクロールすると、ヘッダーが固定されたままで、少し変化していることに注目してください。どうやってやるの？

CSS でそれを行う方法は知っていますが、ヘッダーにさらにスタイルを追加したいと考えています。

Answer 1

ページのソースを表示するだけです：

$(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');
            });
        }
    }
});​

スクロールリスナーがあり、イベントが発生すると、メニューのクラスが と の間.defaultで切り替えられます.scrolling