Javascript JS更改滚动条上的边框颜色

这里没有。一些简单的东西，只想在我滚动页面时改变左边框的颜色。到目前为止，我有两种颜色的工作，但我需要添加第三个

这是我的版本-我已经注释掉了我的错误代码

---

干杯

试着做这样的东西

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=200&&滚动<400）{
$（“.main wrapper”）.removeClass（“绿色”）；
$（“.main wrapper”）.addClass（“蓝色”）；
} 
否则如果（滚动>=400）{
$（“.main wrapper”）.removeClass（“蓝色”）；
$（“.main wrapper”）.addClass（“绿色”）；
}
否则{
$（“.main wrapper”）.removeClass（“蓝色”、“绿色”）；
}
});
正文{
最小高度：1200px；
过渡：背景色0.75秒；
}
.主包装{
左边框：9px实心红色；
/*背景色：红色*/
过渡：边框左侧颜色0.9秒；
最小高度：1020px；
}
蓝先生{
左边框颜色：蓝色；
}
格林先生{
左边框颜色：绿色；
}


您可以使用具有一定宽度的if-else条件，并相应地更改边框颜色。


$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动<200）{
$（“.main wrapper”）.css（“边框颜色”、“红色”）；
}否则如果（滚动>200&&滚动<1000）{
$（“.main wrapper”）.css（“边框颜色”、“蓝色”）；
}否则{
$（“.main wrapper”）.css（“边框颜色”、“绿色”）；
}
});
/*正文{
背景色：红色；
最小高度：1200px；
过渡：背景色0.75秒；
} */
.主包装{
左边框：9px实心红色；
/*背景色：红色*/
过渡：边框左侧颜色0.9秒；
最小高度：1020px；
高度：3000px；
}
蓝先生{
左边框颜色：蓝色；
}
格林先生{
左边框颜色：绿色；
}
如果您想添加更多颜色，可以尝试此解决方案。您可以轻松地将更多对象添加到
scrollColor
数组中。
var scrollColor=[
{
maxScroll:600，
班级：“绿色”
},
{
maxScroll:400，
班级：'蓝色'
},
{
maxScroll:200，
课堂：“红色”
}
];
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var主类；
对于（变量i=0；i滚动）{
mainClass=scrollColor[i].class；
}
}
$（“.main wrapper”）.addClass（mainClass）；
});
正文{
最小高度：1200px；
过渡：背景色0.75秒；
}
.主包装{
左边框：9px纯色灰色；
过渡：边框左侧颜色0.9秒；
最小高度：1020px；
}
蓝先生{
左边框颜色：蓝色；
}
格林先生{
左边框颜色：绿色；
}
瑞德先生{
左边框颜色：红色；
}
一个供访问者使用的小插件：


$.fn.classChange=函数（myClasses）{
var myWin=$（窗口）；
返回此值。每个（函数（）{
var myWrapper=$（这个）；
myWin.on（'scroll'，函数（e）{
var scroll=myWin.scrollTop（）；
var=false；
$.each（MyClass，function（i，cl）{
如果（滚动）您给出的代码已经改变了颜色，您到底想做什么？对注释掉的
if
使用
else if
，并更新第一个以检查滚动是否在400以下。Hi@almartinez，为了澄清，我想滚动到400并将条更改为绿色（因此有3种不同的颜色）我上面发布的代码给了我2种颜色，而不是3种。Thanks@GavinFriel更新了我的答案，您的代码工作正常，只是更改了
if
for
else if
那么对于部分200到400，它将是红色的？
$(window).scroll(function() {    
var scroll = $(window).scrollTop();

    if (scroll >= 200) {
      $(".main-wrapper").addClass("blue");
    } 

    //if(scroll>=400) {
    //  $(".main-wrapper").addClass("green");
    //}


   else {
     $(".main-wrapper").removeClass("blue");
     //$(".main-wrapper").removeClass("green");
    }
});