Jquery 更改滚动条上的背景色

当我滚动时，如何将背景颜色更改为纯色？当用户在平滑过渡中旋转时，必须触发颜色更改

---

只需创建两个CSS类。一个用于纯色背景色，一个用于渐变色。然后使用jQuery.scroll（）事件侦听器在两个CSS类之间切换。

使用jQuery，您可以触发文档滚动上的类更改，并根据CSS中的类更改颜色，如下所示：

jQuery：

CSS:

看小提琴

在此代码中，您可以截取开始和结束滚动（使用）

如果scrool高于100px，则在滚动期间背景变为蓝色

jquery

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING');
    var height = $(window).scrollTop();

    if(height  > 100) {
        $('p').addClass('linear');
    }

} ) );
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('FINISH');
    $('p').removeClass('linear');
} ) );

css

---

请检查这一个很好，但我想改变开始没有中间，我想开始时，我有滚动100px（例如）和改变是平滑的，像一个褪色。但是谢谢@马克：如果能在问题中解释一下。。。但是看看这个：谢谢@web tiki，但是当我开始滚动时，颜色变化时会出现闪光，我怎么解决这个问题呢？我希望变化不会从中间开始，我希望在滚动100px（例如）时开始，并且变化平滑，就像褪色一样。

.sticky-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);

$(document).ready(function () {
    $(window).scroll(function(){
        $('.sticky-nav').addClass('scrolled');
    });
});

.sticky-nav.scrolled{
    background: gold;
}

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING');
    var height = $(window).scrollTop();

    if(height  > 100) {
        $('p').addClass('linear');
    }

} ) );
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('FINISH');
    $('p').removeClass('linear');
} ) );

#scrollMsg{
 position:fixed;
 color: red;
 font-size: 20px; 
    background-color: white!important;
    padding:20px;
}
p{
    background: rgba(0,0,0,0.4);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.linear{
    background-color:blue;
}