如何实现页面滑动到哪块导航栏高亮

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

监听滚动事件：使用JavaScript代码监听页面的滚动事件，当页面滚动时触发相应的函数。

window.addEventListener('scroll', function() {
  // 在这里执行相应的操作
});

获取滚动位置：在滚动事件的处理函数中，使用window.scrollY属性获取当前页面的垂直滚动位置。

var scrollPosition = window.scrollY;

遍历导航栏菜单项：获取所有导航栏的菜单项，并遍历它们。

var menuItems = document.querySelectorAll('.navbar .menu-item');

menuItems.forEach(function(menuItem) {
  // 在这里执行相应的操作
});

判断滚动位置与每个菜单项的位置关系：对于每个菜单项，获取其对应的目标区域，并判断滚动位置是否在该区域内。

var targetId = menuItem.getAttribute('data-target');
var targetElement = document.getElementById(targetId);
var targetPosition = targetElement.offsetTop;

if (scrollPosition >= targetPosition) {
  // 滚动位置在目标区域内，执行相应的操作
}

高亮当前可见的菜单项：根据滚动位置与每个菜单项的位置关系，判断哪个菜单项应该被高亮。

menuItems.forEach(function(menuItem) {
  var targetId = menuItem.getAttribute('data-target');
  var targetElement = document.getElementById(targetId);
  var targetPosition = targetElement.offsetTop;

  if (scrollPosition >= targetPosition) {
    menuItem.classList.add('active');
  } else {
    menuItem.classList.remove('active');
  }
});

CSS样式：为高亮的菜单项添加相应的CSS样式，以突出显示当前所在的位置。

.navbar .menu-item.active {
  color: red;
  /* 添加其他样式 */
}

通过以上步骤，就可以实现页面滑动到哪块导航栏高亮的效果