前端实现页面滑动到哪块导航栏高亮

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

1. 给每个导航栏的链接添加一个自定义属性，例如data-nav，值为对应页面块的唯一标识符，可以是id或其他标识符。
2. 使用JavaScript监听页面滚动事件，获取当前滚动位置。
3. 遍历所有页面块的位置信息，判断当前滚动位置属于哪个页面块。
4. 根据当前页面块的标识符，找到对应的导航栏链接，并添加高亮样式。

以下是一个简单的示例代码：

HTML：

<nav>
  <ul>
    <li><a href="#section1" data-nav="section1">Section 1</a></li>
    <li><a href="#section2" data-nav="section2">Section 2</a></li>
    <li><a href="#section3" data-nav="section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2</p>
</section>

<section id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3</p>
</section>

JavaScript：

// 获取导航栏链接和页面块元素
const navLinks = document.querySelectorAll('nav a');
const sections = document.querySelectorAll('section');

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

  // 遍历所有页面块，判断当前滚动位置属于哪个页面块
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;

    if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
      // 获取当前页面块的标识符
      const navId = section.getAttribute('id');

      // 根据标识符找到对应的导航栏链接，并添加高亮样式
      navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('data-nav') === navId) {
          link.classList.add('active');
        }
      });
    }
  });
});

CSS：

nav a.active {
  color: red;
}

在CSS中，可以通过给高亮样式添加不同的颜色、背景色等效果来突出显示当前导航栏项