jquery - CSS/Jquery 固定标题 + 更改

Question

我想实现这个 effect

请注意，当您向下滚动时，标题如何保持固定但也会发生一些变化。我该怎么做？

我知道如何使用 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 之间切换