滚动上的jQuery Animate标头

Question

我正在为普通的HTML5网站构建一个简单的标头。 我正在尝试使标题更改某个.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设置背景颜色的动画。

请检查小提琴：

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/