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

前端可以通过监听页面滚动事件来实现导航栏高亮的效果。具体的步骤如下：

首先，在导航栏的每个链接上添加一个唯一的标识符，比如data-nav属性，值为对应的页面块的id。例如：

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

使用JavaScript代码来监听页面滚动事件，并根据滚动位置来判断哪个页面块处于可视区域内。可以使用getBoundingClientRect()方法来获取页面块的位置信息。例如：

window.addEventListener('scroll', function() {
  var sections = document.querySelectorAll('section'); // 获取所有页面块
  sections.forEach(function(section) {
    var rect = section.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      var navLink = document.querySelector('[data-nav="' + section.id + '"]');
      // 添加高亮样式
      navLink.classList.add('active');
    } else {
      var navLink = document.querySelector('[data-nav="' + section.id + '"]');
      // 移除高亮样式
      navLink.classList.remove('active');
    }
  });
});

在CSS中定义高亮样式，例如：

.active {
  color: red;
}

这样，当页面滚动到某个页面块时，对应的导航链接就会被高亮显示