javascript - 滚动上的 jQuery 动画标题

Question

我正在为纯 HTML5 网站构建一个简单的 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/