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