jQuery 在 Scroll 上设置动画 Header

Question

我正在为普通 HTML5 站点构建一个简单的 header。我正在尝试让 header 在某个 .scrollTop() 处更改背景颜色。我知道 scroll 部分有效，只是动画无效。

$(document).ready(function(){
    $(window).scroll(function(){
        var SCROLL = $(window).scrollTop();
        if(SCROLL > 100) {
            $('header#header').animate({
                background:'#fff'
            },300);
        }
    });
});

Answer 1

您只使用了 jQuery，请记住您需要外部插件来仅使用 jQuery 为背景颜色设置动画。

请检查fiddle：

http://jsfiddle.net/m3dis/L06dcg4c/

我用过这个插件：

http://www.bitstorm.org/jquery/color-animation/

但是

我建议你使用 CSS3 转换和 jQuery addClass, removeClass.

示例：

if(SCROLL > 100) {
            jQuery('header').addClass('white');
        } else if(SCROLL < 100) {
            jQuery('header').removeClass('white');
        }

http://jsfiddle.net/m3dis/L06dcg4c/1/

jQuery 在 Scroll 上设置动画 Header

jQuery Animate Header on Scroll

html

javascript

css

jquery

scrolltop