页面滑动导航栏高亮实现方法 | JavaScript 代码示例 - 常规

实现页面滑动到哪块导航栏高亮可以通过以下步骤：

监听窗口滚动事件，当用户滚动页面时触发。

window.addEventListener('scroll', function() {
  // 在这里处理页面滚动事件
});

获取当前滚动位置。可以使用window.pageYOffset或document.documentElement.scrollTop来获取当前滚动的垂直距离。

var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

遍历导航栏中的每个链接，获取对应的目标元素位置，并判断当前滚动位置是否在目标元素的范围内。

var navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(function(link) {
  var target = document.querySelector(link.getAttribute('href'));
  var targetTop = target.offsetTop;
  var targetBottom = targetTop + target.offsetHeight;
  
  if (scrollPosition >= targetTop && scrollPosition < targetBottom) {
    // 当前滚动位置在目标元素范围内，高亮导航栏链接
    link.classList.add('active');
  } else {
    // 当前滚动位置不在目标元素范围内，取消高亮导航栏链接
    link.classList.remove('active');
  }
});

在CSS中定义高亮样式.active，以突出显示当前导航栏链接。

.active {
  color: red;
  /* or any other styles */
}

这样，当用户滚动页面时，根据滚动位置的变化，对应的导航栏链接就会被高亮显示。