在没有JQuery的情况下在滚动位置更改div风格

-1

我对网页设计比较陌生，但尚未准备好深入JQuery，但我开始根据需要使用Javascript。我无法弄清楚如何在特定的滚动位置改变div菜单栏的背景颜色。在没有JQuery的情况下在滚动位置更改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"; 
}

从我可以告诉作为一个小白，if语句只能运行在负载和VAR scrollHeight属性没有更新的用户滚动。我感谢任何帮助做这项工作！我会绕过去学习JQuery，但是我想在图书馆之前更好地理解语言。

来源

2017-06-20 Philip Jarrett

在你成为一名优秀的编码员之前，你必须成为一名出色的搜索者。哈哈。不过，严肃地说，这个话题在互联网上覆盖。搜索“javascript检索滚动位置” –

互联网上充满了讨论滚动位置的资源。但我很困惑各种方法迭代滚动功能，因为它似乎有多个选项，我似乎无法做任何工作。似乎90％或更多的这些资源也使用JQuery，所以我打算学习它。谢谢您的帮助。 –

右键 - 你需要安装的东西，继续检查滚动位置并相应更新：

function checkPosition() { 

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

    // Check your position here 

} 
// Initial Call: 
checkPosition();

更重要的是，在Scroll Events阅读起来。

编辑：

此外，而不是直接操纵的风格，我建议你添加或删除类：

element.classList.add("newClass");

（顺便说一下，jQuery是其实比 '常规' 的JavaScript更容易。）

来源

2017-06-20 22:10:34

感谢您的帮助！我读了requestAnimationFrame（）函数 - 非常漂亮。在Javascript中添加类而不是操作样式有什么好处？ –

实际上有很多好处。对于一个问题的分离：您可以将所有的样式信息保存在您的CSS中，并且您的JavaScript可以专注于函数。但除此之外，跟踪事情更容易。不要添加＃F00的颜色，然后尝试撤销该更改，您可以只打开和关闭一类“警报”。 –

@PhilipJarrett模块化，灵活性和易管理性。利弊远大于弊。将样式放入样式表中，您会很开心。 –

在没有JQuery的情况下在滚动位置更改div风格

回答

相关问题