JavaScript -Изменить стиль навигации при прокрутке

Question

• 1000

Почему? Как это решить?

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;
}

Answer 1

Ошибка, которую вы даете, вызвана первой ссылкой.

href - #, поэтому свойство link.hash будет ""

Оба document.querySelector("") и document.querySelector("#") вывести ошибку. Решение состоит в том, чтобы добавить проверку, если ha sh не пуст.

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>