Question

我的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时，您需要使用带有索引的元素并对其进行操作。在示例中，我将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')
    };
});

Javascript找不到折叠标题的元素

2 个答案: