滚动区块高亮特效（侧边导航联动高亮，三种样式可调）

效果演示（真实可交互）

演示区为「左侧导航 + 右侧滚动内容」的经典文档布局：滚动右侧时左侧自动高亮当前区块，点击导航平滑跳转。高亮样式可在下方实时切换。

完整代码

<nav class="sh-nav">
  <a href="#sec-1" data-target="sec-1">01 简介</a>
  <a href="#sec-2" data-target="sec-2">02 特性</a>
</nav>
<div class="sh-scroller" id="shScroller">
  <section class="sh-sec" id="sec-1">……</section>
  <section class="sh-sec" id="sec-2">……</section>
</div>

.sh-nav a.active { border-left: 3px solid #6c8cff; color: #fff; }

const scroller = document.getElementById('shScroller');
const secs = scroller.querySelectorAll('.sh-sec');
const links = nav.querySelectorAll('a');
const OFFSET = 40;

function highlight() {
  let current = secs[0];
  for (const sec of secs) {
    if (scroller.scrollTop + OFFSET >= sec.offsetTop) current = sec;
    else break;
  }
  links.forEach(a => a.classList.toggle('active', a.dataset.target === current.id));
}
scroller.addEventListener('scroll', highlight, { passive: true });
highlight();

核心算法：滚动时遍历区块，找到「顶部已越过视口顶部偏移 40px」的最后一个区块作为当前区块——这是最直接的 scrollspy 实现，一次线性遍历即可，区块数通常是个位数，性能无压力。点击导航则 scrollTo({ top: sec.offsetTop - 20, behavior: 'smooth' }) 平滑跳转。

参数说明

兼容性与性能

• 滚动回调仅做线性遍历与类名切换，不触发任何布局属性写入；{ passive: true } 不阻塞滚动线程
• 高亮切换只改类名，样式由 CSS 过渡完成，浏览器按合成层处理背景与边框变化
• 区块数量少时遍历开销可忽略；即使 50 个区块，每帧也只是几十次比较，远低于一帧的预算
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android），无需任何 polyfill 与第三方库

常见问题

Q: 用 IntersectionObserver 实现会不会更好？ 两种都可行：本组件用 offsetTop 比较，逻辑直观、无观察器回收负担；区块间距大、需要「越过即切换」的精确语义时更合适。

Q: 高亮切换有延迟或跳变？ 在滚动回调里直接更新类名即可实时响应；若希望平滑过渡，给导航项加上 transition（本组件已内置），高亮样式切换会自然过渡。

Q: 区块高度特别大（一屏放不下）怎么办？ 增大 OFFSET（例如设为视口高度的一半），让「区块中部进入视口」时才切换，阅读长章节时导航更稳定。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。