在JavaScript中滚动添加类名

我试图在滚动条上添加一个

className

。我不断地得到一份工作

文档未定义

编辑：我发现我是因为打字错误。当我定义

document.getElementsByClassName（“主导航”）.scrollTop时，
控制台中不会出现任何内容。以及网页不会受到影响

window.onscroll=function（）{
windowScroll（）；
};
函数windowScroll（）{
if（document.getElementsByClassName（“主导航”）.scrollTop>50 | | document.documentElement.scrollTop>50）{
document.getElementsByClassName（“主导航”）.className=“测试”；
}否则{
document.getElementsByClassName（“主导航”）.className=“”；
}
}

CSS是

.test{
背景：粉红色
}

我不一定在寻找答案，我只需要指导。有两个问题：

getElementsByClassName
返回一个
HTMLCollection
数组，它没有属性
scrollTop
。您可能需要第一项，因此代码应该是
document.getElementsByClassName（“主导航”）[0]
（或
document.querySelector（“主导航”）
）

但如果您尝试，您将得到一个错误：

无法读取未定义的属性“scrollTop”


window.onscroll=function（）{
windowScroll（）；
};
函数windowScroll（）{
if（document.getElementsByClassName（“主导航”）.scrollTop>50 | | document.documentElement.scrollTop>50）{
document.getElementsByClassName（“主导航”）.className=“测试”；
}否则{
document.getElementsByClassName（“主导航”）.className=“”；
}
}
html，正文{
身高：150%；
}
.测试{
背景：粉红色
}
您的console.log的问题是，您试图为一个包含1个或多个div的HTML集合（页面中的元素集合）提取scrollTop-因此它无法将scrollTop作为console.log进行检查，因为它实际上没有该属性

假设您只有一个具有“main nav”类的元素（或者您希望将其应用于具有该类的特定元素），那么最好使用以下选项之一：
document.getElementsByClassName（“main nav”）[0]
或
document.getElementById（“main nav”）
（后者要求您创建主导航id而不是类）

但是，对于第一个类，使用className会重新分配类名，而不是添加到特定的div中，因此您可以使用
document.getElementsByClassName（“main nav”）[0].classList.add（“test”）
（如果不符合您的条件，则使用
remove
而不是
add
）

如果有多个元素具有“main nav”类，您仍然可以使用我建议的第一个选项-只需要将其包装在for循环中，并用您选择的变量替换0

for (i = 0; i < document.getElementsByClassName("main-nav").length; i++) {
  //your code here using document.getElementsByClassName("main-nav")[i]
}

for（i=0；i
既然你选择了
GetElementsByCassName
，那么它会得到所有的类名，但是你想要其中一个，我建议你使用jquery，它会比JS简单得多。非常感谢！我对javascript相当陌生，基本上了解了W3学校，并尝试在不知道每个人如何使用Contino的情况下使用他们的示例你们的帮助使这一切成为可能。再次感谢你们。我很高兴我能帮忙：）祝你们好运@MoshFeu-想知道为什么您还设置了
document.documentElement.scrollTop>50
？TBH，我不记得了，但可能我没有从OP的代码中更改这部分。