如何在用户查看页面的特定部分时更改导航栏图标的颜色

<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>
<section id="section2">
  <!-- 第二部分内容 -->
</section>
<section id="section3">
  <!-- 第三部分内容 -->
</section>

.navbar {
  background-color: #333;
  color: #fff;
}

.navbar li {
  display: inline-block;
  margin: 0 10px;
}

.navbar li a {
  color: #fff;
}

.navbar li.active a {
  color: #ff0000; /* 激活状态下的颜色 */
}

window.addEventListener('scroll', function() {
  var section1 = document.getElementById('section1');
  var section2 = document.getElementById('section2');
  var section3 = document.getElementById('section3');
  var navbar = document.querySelector('nav');

  if (isElementInView(section1)) {
    highlightNavbarItem(navbar, 0);
  } else if (isElementInView(section2)) {
    highlightNavbarItem(navbar, 1);
  } else if (isElementInView(section3)) {
    highlightNavbarItem(navbar, 2);
  }
});

function isElementInView(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );
}

function highlightNavbarItem(navbar, index) {
  var items = navbar.getElementsByTagName('li');

  for (var i = 0; i < items.length; i++) {
    if (i === index) {
      items[i].classList.add('active');
    } else {
      items[i].classList.remove('active');
    }
  }
}