如何在将单个网页向下滚动到不同部分时更改导航栏上的突出显示颜色

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <!-- Section 1 content -->
</section>

<section id="section2">
  <!-- Section 2 content -->
</section>

<section id="section3">
  <!-- Section 3 content -->
</section>

nav {
  position: fixed;
  top: 0;
  background-color: #fff;
  width: 100%;
  z-index: 999;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.nav-highlight {
  color: #ff0000; /* 设置突出显示的颜色 */
}

window.addEventListener('scroll', function() {
  var sections = document.querySelectorAll('section');
  var navLinks = document.querySelectorAll('nav ul li a');

  sections.forEach(function(section, index) {
    var rect = section.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      navLinks.forEach(function(navLink) {
        navLink.classList.remove('nav-highlight');
      });
      navLinks[index].classList.add('nav-highlight');
    }
  });
});