jQuery背景颜色在滚动时淡入

Miquel Las Heras和Owen 'Coves' Jones的答案的组合，他们都提交了不完全符合主题或不完整的答案。

同时使用后台传输（CSS3）和jQuery。

JSFiddle

jQuery

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() > 100) {
            $("header").addClass("scrolled");
        } else {
            $("header").removeClass("scrolled");
        }
    });
});

.CSS

header {
    background-color:blue;
    -webkit-transition: background-color 700ms linear;
    -moz-transition: background-color 700ms linear;
    -o-transition: background-color 700ms linear;
    -ms-transition: background-color 700ms linear;
    transition: background-color 700ms linear;
}
header.scrolled {
    background-color: red;
}

更新二月3rd，2017

浏览器支持非常好，不应使用下面性能较差的jQuery解决方案。浏览器支持。

跨浏览器解决方案

如果你想让它更跨浏览器兼容，你可以尝试颜色插件。但从我测试的内容来看，它的性能相当糟糕。JSFiddle

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(document).scrollTop() > 100) {
            $("header").animate({
                backgroundColor: "red"
            }, 200);
        } else {
            $("header").animate({
                backgroundColor: "blue"
            }, 200);
        }
    });
});

不要忘记插件本身：

//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js

首先，正如另一个答案中提到的，您需要包含jQuery UI或用于彩色动画的jQuery Color插件。

其次，这只是飞翔而已，但给这个老大学试试：

$(function(){
    $(window).scroll(function(){
        var $scrollPercent = ($(document).scrollTop() / 100);
        if($scrollPercent <= 1){
            $('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
        }
    });
});

这应该会根据您向下滚动的页面数量逐渐淡入。这意味着，如果向下滚动 50 像素，背景颜色不透明度将设置为 50%（需要向下 50 像素/高度为 100 像素）。您还可以通过这种方式轻松更改要向下滚动的高度量，以非常轻松地达到完全不透明度。

编辑 所以事实证明你只想在 100px 后淡入颜色......不是我逐渐淡入。没关系。

其他人指出了美妙的（而且更好）CSS3 方法来做到这一点......创建过渡效果，并在滚动时添加类。我不会窃取他们的雷声，但我将提供一个也适用于古代浏览器的替代方案。

顶部的标题内添加一行额外的 HTML：

<div class="header">
    <div class="headerBackground"></div>
    <!-- other header stuffs -->
</div>

然后将其 CSS 设置为这样：

.header {
    position:relative;
}
.headerBackground {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgb(0,0,0);
    opacity:0;
    filter:alpha(opacity=0); // for IE8 and below
}

然后使用以下 jQuery：

$(function(){
    $(window).scroll(function(){
        var $bg = $('.headerBackground');
        if($(document).scrollTop() >= 100){
            $bg.animate({opacity:1},500); // or whatever speed you want
        } else {
            $bg.animate({opacity:0},500);
        }
    });
});

这也具有不需要另一个库（jQuery UI/jQuery Color插件）的额外好处。当然，缺点是非语义HTML。就像我说的，只是另一种选择。

我更喜欢为此类问题创建 2 个 css 类。一个用于窗口滚动时，另一个用于不滚动窗口时：

   标题 { 背景：透明; }    header.scrolled { background： #f2f2f2; }

那么javascript应该是：

   $（函数 （） {      $（window）.scroll（function （） {        if（$（document）.scrollTop（）>100）{          $（'header'）.addClass（'scrolled'）;        }        否则 {          $（'header'）.removeClass（'scrolled'）;        }      });    })

你的代码是正确的，但jQuery本身不支持彩色动画。 你需要一个插件或jquery-uUI：http://jqueryui.com/animate/

编辑：实际上，你的代码有点错误。 你想把背景颜色设置为一些东西。 背景：1 无效 CSS：

然后.css（{'backgroundColor'： 'blue'}）

如果你不需要支持很多较旧的浏览器，你可以用jQuery和css3过渡的组合来动画背景颜色：

取 HTML：

<div id="myBox">Stuff here</div>

还有javascript：

var myBox = $('#myBox');
myBox.on('click', function (el) {
    myBox.css('background-color', 'red');
}

然后单击元素 #myBox 该元素将更改其背景颜色为红色。 瞬间，不褪色。

如果您还设置了 css 代码：

#myBox {
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

然后，背景的任何颜色变化都将在 300 毫秒内褪色。 适用于所有最新版本的浏览器，但不适用于 IE 9 及更低版本。

我最终使用的解决方案如下：

我创建了一个根据滚动位置淡入和淡出的部分。

.CSS

.backTex {
    width:100%;
    height:500px;
    margin-top:50px;
    background-color: @myGreen;
    //Height
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    //Background-Color
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
} 

jQuery

$(document).scroll(function() {
        var positionScroll = $(this).scrollTop();
        if(positionScroll <= 499) {
            $(".backTex").css("background-color", "#fff");    
        } else if (positionScroll > 500 && positionScroll < 1100) {
            $(".backTex").css("background-color", "#2ecc71");
        } else {
            $(".backTex").css("background-color", "#fff");
        }
    });

就兼容性而言，到目前为止，我还没有注意到浏览器之间的任何问题。如果您遇到任何情况，请回复我的帖子。谢谢！