Javascript 在不使用JQuery的情况下更改滚动位置处的div样式

我对网页设计还比较陌生，还没有准备好深入JQuery，但我开始根据需要使用Javascript。我不知道如何在某个滚动位置更改div菜单栏的背景色

CSS

Javascript

var scrollHeight = window.pageYOffset;

if (scrollHeight >= 100) {
    document.getElementById("mainMenu").style.backgroundColor = "green";
}

---

从我作为noob可以看出，if语句只在加载时运行，var scrollHeight不会随着用户滚动而更新。我感谢任何帮助使这项工作！我将开始学习JQuery，但我想在涉足库之前更好地理解该语言。

对–您需要设置一些东西，继续检查滚动位置并相应地更新：

function checkPosition() {

  // Continue calling this function:
  requestAnimationFrame(checkPosition);

  // Check your position here

}
// Initial Call:
checkPosition();

更好的是，继续读下去

编辑：

此外，我建议添加或删除类，而不是直接操作样式：

element.classList.add("newClass");

---

顺便说一句，jQuery实际上比“常规”javascript更容易。

在你成为一名优秀的程序员之前，你必须成为一名优秀的搜索者。哈哈。说真的，这个话题在互联网上到处都有。沿着javascript搜索检测滚动位置互联网上充满了讨论滚动位置的资源。但是我被迭代scroll函数的各种方法弄糊涂了，因为似乎有多个选项，而我似乎无法完成任何工作。这些资源中似乎有90%或更多都使用JQuery，所以我计划学习它。谢谢你的帮助。谢谢你的帮助！我阅读了requestAnimationFrame函数-非常漂亮。在Javascript中添加类而不是操纵样式的好处是什么？实际上有很多好处。首先，关注点分离：您可以将所有样式信息保留在css中，而javascript可以只关注功能。但除此之外，跟踪事情更容易。您不必添加F00颜色，然后尝试撤消该更改，只需再次打开和关闭警报类即可。@PhilipJarrett模块化、灵活性和易管理性。利远大于弊。把样式放在样式表中，你会很高兴你这么做了。

element.classList.add("newClass");