使用航点向下滚动到div时突出显示导航链接

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

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

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

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

// 获取导航链接和目标div元素
var navLinks = document.querySelectorAll('nav ul li a');
var sections = document.querySelectorAll('div[id^="section"]');

// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 获取当前滚动位置
  var currentScrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  // 遍历所有目标div
  sections.forEach(function(section) {
    var sectionTop = section.offsetTop;
    var sectionHeight = section.offsetHeight;

    // 判断当前滚动位置是否在目标div范围内
    if (currentScrollPos >= sectionTop && currentScrollPos < sectionTop + sectionHeight) {
      // 移除所有导航链接的突出显示样式
      navLinks.forEach(function(link) {
        link.classList.remove('active');
      });

      // 给当前目标div对应的导航链接添加突出显示样式
      var currentLink = document.querySelector('a[href="#' + section.id + '"]');
      currentLink.classList.add('active');
    }
  });
});

nav ul li a.active {
  /* 突出显示样式，可以根据需求自定义 */
  font-weight: bold;
  color: red;
}