滚动时菜单背景颜色未改变，如何实现滚动超50像素时转为黑色？

嘿，我一眼就看到问题所在了——你用了classList.toggle("change")，但这个方法的逻辑是类存在就移除，不存在就添加，这就导致当你持续滚动（比如滚动距离一直大于50px）时，每次触发scroll事件都会反复切换这个类，看起来就像颜色没变化；而且当你滚动回50px以内时，也没有代码去移除这个类，菜单会一直保持黑色。

修复后的完整代码 #

JavaScript 逻辑修正 #

function myFunction() {
  const menu = document.getElementById("test");
  // 兼容不同浏览器的滚动距离获取
  const scrollDistance = document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scrollDistance > 50) {
    menu.classList.add("change"); // 超过50px时添加黑色背景类
  } else {
    menu.classList.remove("change"); // 回到50px以内时移除类
  }
}

CSS 保持不变 #

#test {
  background-color: #d2d2d2;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
}
.change {
  background-color: black;
}

关键补充：绑定滚动事件 #

别忘了把函数绑定到window的scroll事件上，不然函数根本不会触发！你可以二选一：

1. 在HTML里直接绑定：

<body onscroll="myFunction()">

2. 在JavaScript里用事件监听（更推荐这种方式，分离HTML和逻辑）：

// 页面加载完成后绑定事件
window.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('scroll', myFunction);
});

这样修改后，滚动超过50px时菜单会稳定变成黑色，滚回去就恢复浅灰，完美解决你的问题～

内容的提问来源于stack exchange，提问作者TakeDown