前端如何实现页面划到哪一块导航栏那一块高亮

前端实现页面划到哪一块导航栏那一块高亮，可以通过以下步骤实现：

获取页面滚动的位置：可以使用window.scrollY或document.documentElement.scrollTop来获取页面滚动的位置。
监听页面滚动事件：可以使用window.addEventListener('scroll', callback)来监听页面滚动事件，其中callback是滚动事件触发时要执行的回调函数。
判断页面滚动位置与各个块的位置：遍历导航栏对应的每个块，获取每个块的位置信息。可以使用Element.getBoundingClientRect()方法来获取元素相对于视口的位置信息。
根据滚动位置判断高亮的导航栏项：比较滚动位置与每个块的位置信息，确定当前页面滚动到哪个块，然后根据对应的块确定要高亮的导航栏项。
高亮导航栏项：通过添加CSS类名或修改样式来实现导航栏项的高亮效果。

以下是一个示例代码：

// 获取导航栏对应的块元素
const sections = document.querySelectorAll('.section');
// 获取导航栏项元素
const navItems = document.querySelectorAll('.nav-item');

// 监听页面滚动事件
window.addEventListener('scroll', highlightNavItem);

function highlightNavItem() {
  // 获取页面滚动位置
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
  
  // 遍历块元素，判断页面滚动到哪个块
  sections.forEach((section, index) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
      // 高亮导航栏项
      navItems.forEach((item) => {
        item.classList.remove('active');
      });
      navItems[index].classList.add('active');
    }
  });
}

在上述代码中，.section是每个块的类名，.nav-item是导航栏项的类名，.active是高亮状态的类名。可以根据实际情况修改这些类名