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

要实现页面滑动到哪块，哪块导航栏高亮的效果，可以按照以下步骤进行：

首先，给每个需要滚动到的块元素（例如 <div> 或 <section>）设置一个唯一的 id 属性，用于标识每个块。
监听窗口的滚动事件，并获取当前滚动位置。
根据滚动位置，判断当前在哪个块范围内。可以通过获取每个块元素的 offsetTop 属性来判断当前滚动位置是否在某个块的范围内。
根据当前滚动位置所在的块，更新对应导航栏的高亮状态。可以通过给高亮的导航栏项添加一个特定的 class，然后在滚动事件中判断当前块，并移除其他导航栏项的高亮 class。

以下是一个示例的 JavaScript 代码，实现了页面滑动到哪块哪块导航栏高亮的效果：

// 获取所有需要滚动到的块元素
const sections = document.querySelectorAll('section');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  // 获取当前滚动位置
  const scrollPosition = window.scrollY;

  // 遍历每个块元素
  sections.forEach((section) => {
    // 获取当前块的顶部位置和高度
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;

    // 判断当前滚动位置是否在当前块的范围内
    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
      // 添加高亮 class 到对应导航栏项
      const navItem = document.querySelector(`a[href="#${section.id}"]`);
      navItem.classList.add('active');
    } else {
      // 移除其他导航栏项的高亮 class
      const navItem = document.querySelector(`a[href="#${section.id}"]`);
      navItem.classList.remove('active');
    }
  });
});

以上示例代码中，假设导航栏的每个项都是 <a> 标签，并且其 href 属性值与对应块元素的 id 属性值相同。在高亮导航栏项时，会给对应的 <a> 标签添加一个名为 "active" 的 class，可以根据需要自行调整或修改