Javascript 找不到用于折叠标头的元素

Question

My Javscript：

var navTop = document.getElementsByClassName('main-nav');
window.addEventListener('scroll', function() {
if(window.pageYOffset > 100) {
navTop.classList += ' .small';
} else{
navTop.classList = 'main-nav';
};
});

标题：

<div>
<header class='main-nav'>
<nav>
<ul>
<a href='#aboutme'>
<li>About Me</li>
</a>
<br>
<a href='#projects'>
<li>Projects</li>
</a>
<br>
<a href='#experience'>
<li>Experience</li>
</a>
<br>
<a href='#contactme'>
<li>Contact Me</li>
</a>
<br>
</ul>
</nav>
</header>
</div>

我将导航设置为固定，但 JavaScript 没有做任何事情。相反，它只是在每次向下滚动时显示"navTop 为空"错误。我的语法或逻辑是否有任何错误可能导致这种情况？如果有更好的方法来制作折叠标题，我很高兴听到它。

Answer 1

由于getElementsByClassName()返回 HTMLCollection，您需要使用使用 index 的元素并对其进行操作。在示例中，我使用了0作为第一个元素。

同样在使用classList时，需要使用其方法来操作CSS类

var navTop = document.getElementsByClassName('main-nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
navTop[0].classList.add('small')
} else {
navTop[0].classList.remove('small')
};
});

您也可以按照@David的建议使用toggle()方法

classList.toggle('small', window.pageYOffset > 100);

Answer 2

由于您只有一个具有类main-nav的元素，因此您可以使用querySelector()来获取该元素的引用，而不是使用getElementsByClassName()它将返回元素数组。

将代码更改为：

var navTop = document.querySelector('.main-nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
navTop.classList.add('small')
} else {
navTop.classList.remove('small')
};
});