javascript - JavaScript-在滚动时更改导航样式

Question

我希望在滚动页面时突出显示活动部分。

但我收到错误：“未捕获的 DOMException：无法在 'Document' 上执行 'querySelector'：提供的选择器为空。”

为什么？如何解决这个问题？

js：

window.addEventListener('scroll', event=>{
    let navigationLinks = document.querySelectorAll('nav ul li a');
    let fromTop = window.scrollY;

    navigationLinks.forEach(link=>{
        let section = document.querySelector(link.hash);
        if (section.offsetTop <=fromTop &&
            section.offsetTop + section.offsetHeight > fromTop
        ){
            link.classList.add('active');
        } else{link.classList.remove('active');}
    })
});

html:

<nav>
      <ul class="nav-links">
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
       </ul>
</nav>

<section>
   <div id="about"></div>
   <div id="contact"></div>
</section>

CSS：

nav a.active{
    color: darkcyan;
    border-bottom: 2px solid darkgoldenrod;
}

标签： javascripthtmlcss

Answer 1

您给出的错误是由第一个链接引起的。

href 是#这样的link.hash属性将是""

两者document.querySelector("")并document.querySelector("#")引发错误。解决方案是添加检查哈希是否为空。

if (link.hash != "" && link.hash != "#") {

请注意，Home链接将始终保持活动状态，因为它没有相应的<div id="home">元素

window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;

  navigationLinks.forEach(link => {
    if (link.hash != "" && link.hash != "#") {
      let section = document.querySelector(link.hash);
      if (section.offsetTop <= fromTop &&
        section.offsetTop + section.offsetHeight > fromTop
      ) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    }

  })
});

nav a.active {
  color: darkcyan;
  border-bottom: 2px solid darkgoldenrod;
}


/* for demonstration purposes */

nav {
  position: fixed;
  top: 0;
}

#about,
#contact {
  height: 100vh;
}

<nav>
  <ul class="nav-links">
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section>
  <div id="about">About</div>
  <div id="contact">Contact</div>
</section>