Question

我正在尝试在我正在处理的菜单上实现一项功能。当我滚动超过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/。

感谢您的时间！

Answer 1

id选择器具有比普通类选择器更高的特异性。这意味着你的类css不会覆盖id。所以你需要创建一个具有更高特异性的选择器，在你的情况下只需要在id选择器上标记：

#test.change {
  background-color:black;
}

如果您不想将其与特定ID绑定，则可以在元素名称上进行标记，以提高特异性

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>

Answer 2

如果你想摆脱图形故障，请不要使用切换

x.classList.toggle("change");

相反，只需在滚动为50

时将其设置为黑色

x.style.background = "black";

滚动时颜色不会改变

2 个答案: