Question

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

CSS

.mainMenu {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 80px;
    padding: 20px;
    transition: all 0.2s;
}

的Javascript

var scrollHeight = window.pageYOffset;

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

从我所说的noob，if语句只在load上运行，var scrollHeight在用户滚动时不会更新。我感谢任何帮助使这项工作！我将开始学习JQuery，但我想在涉及图书馆之前更好地理解语言。

Answer 1

正确 - 您需要设置一些继续检查滚动位置并相应更新的内容：

function checkPosition() {

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

  // Check your position here

}
// Initial Call:
checkPosition();

更好的是，请阅读Scroll Events。

编辑：

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

element.classList.add("newClass");

（顺便说一下，jQuery实际上比'常规'javascript更容易。）

在没有JQuery的情况下在滚动位置更改div样式

1 个答案: