我正在本地主机上的 wordpress 网站上工作，并为自定义 javascript 使用插件脚本和样式。我想在滚动值更改时更改背景颜色，例如
滚动值 0-100 然后颜色为红色
滚动值 100-200 然后颜色为蓝色
滚动值 200-300 然后颜色为粉红色
滚动值 300-400 然后颜色为黑色
滚动值 400-500 然后颜色为橙色
通过这段代码，我只能在 javascript 的第一个条件中添加一个类。
.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}
<script>
alert("success");
window.onscroll = function() {myFunction()};
function myFunction() {
if((document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) && (document.body.scrollTop < 100 || document.documentElement.scrollTop < 100)){
document.getElementById("main").className = "scrolled2";
}
else if((document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) && (document.body.scrollTop < 200 || document.documentElement.scrollTop < 200)){
document.getElementById("main").className = "scrolled3";
}
else {
document.getElementById("main").className = "site-main";
}
}
</script>
请检查一下。如果您需要#main在页面加载时显示绿色，只需.site-main在 html中将类添加到您的 div 中。
window.onscroll = function() {myFunction()};
function myFunction() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var elem = document.getElementById("main");
if (scrollTop > 0 && scrollTop < 101) {
elem.className = "scrolled5";
} else if (scrollTop > 100 && scrollTop < 201) {
elem.className = "scrolled6";
} else if (scrollTop > 200 && scrollTop < 301) {
elem.className = "scrolled2";
} else if (scrollTop > 300 && scrollTop < 401) {
elem.className = "scrolled3";
} else if (scrollTop > 400 && scrollTop < 501) {
elem.className = "scrolled4";
} else {
elem.className = "site-main";
}
}.site-main{
background-color:green !important;
}
.scrolled1{
background-color:yellow !important;
}
.scrolled2{
background-color:pink !important;
}
.scrolled3{
background-color:black !important;
}
.scrolled4{
background-color:orange !important;
}
.scrolled5{
background-color:red !important;
}
.scrolled6 {
background-color: blue !important;
}<div id="main" style="height: 10000px;"></div> <!-- temporary height -->本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句