我正在尝试在我正在处理的菜单上实现一项功能。例如，当我滚动超过 50 像素时，我想将背景颜色设置为黑色。这是我的代码:
function myFunction() {
var x = document.getElementById("test");
if ( document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ) {
x.classList.toggle("change");
}
}#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
.change {
background-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>如您所见，背景颜色不会改变。如果您查看 CSS 规则，您可以看到添加了额外的颜色，但被划掉了(在 FireFox 中)。你知道为什么吗？
JSFiddle 演示: https://jsfiddle.net/TakeDown/7djmqkzL/12/ .
感谢您的宝贵时间!
最佳答案
id 选择器比普通类选择器具有更高的特异性。这意味着你的 class css 不会覆盖 id 。因此，您需要创建一个具有更高特异性的选择器，在您的情况下，只需在 id 选择器上标记即可:
#test.change {
background-color:black;
}
如果您不想将其与特定 ID 绑定(bind)，您可以在元素名称上进行标记，以提高特异性
div.change {
background-color:black
}
Can read more about css selector specificity on MDN或in the spec at here
演示
function myFunction() {
var x = document.getElementById("test");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
x.classList.add("change");
} else {
x.classList.remove("change");
}
}#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
#test.change {
background-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>关于javascript - 滚动时颜色不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49959683/