NAVIGATION
锚点滚动监听Scrollspy / Anchor Nav
左侧目录随页面滚动自动高亮当前所在章节，当前项左边有一道品牌色竖条。
效果预览
安装
配置
部署
常见问题
2. 配置环境变量
适合用在哪
文档站、长文正文、单页滚动型官网的分节导航。
容易踩的坑
- 末尾几节内容很短滚不到触发线，对应目录项永远无法高亮。
- 全局开启 smooth 滚动却未判断 prefers-reduced-motion，长距离跳转会引起眩晕。
- 目录超过 20 项且本身不滚动，当前项高亮时已跑出侧栏可视范围。
设计提示词 · Prompt
锚点滚动监听（Scrollspy）：左侧竖向目录（宽 160-220px），每一项左侧有一条 2px 的竖线轨道；当前项的文字变品牌色、650 字重，并把左侧竖线从透明变为品牌色（可用绝对定位的滑块平滑移动）。用 IntersectionObserver 监听各个 h2/h3 进入视口，配合 rootMargin 让激活时机提前一点（例如 -120px 0px -60%）。点击目录项用 scrollIntoView({behavior:"smooth"}) 平滑跳转，并给目标标题加 scroll-margin-top 避免被吸顶导航遮住。
Scrollspy: a vertical table of contents on the left (160-220px wide), each item with a 2px vertical track line on its left; the current item's text turns brand color at 650 weight, and its left line changes from transparent to brand color (an absolutely positioned slider can move smoothly). Use IntersectionObserver to watch each h2/h3 entering the viewport, with a rootMargin that triggers activation slightly earlier (e.g. -120px 0px -60%). Clicking a TOC item jumps smoothly with scrollIntoView({behavior:"smooth"}), and give target headings scroll-margin-top so they aren't hidden by the sticky header.
常见搭配
同一页面里经常和「锚点滚动监听」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-spy">
<div class="d-spy__nav">
<div class="d-spy__item">安装</div>
<div class="d-spy__item is-on">配置</div>
<div class="d-spy__item">部署</div>
<div class="d-spy__item">常见问题</div>
</div>
<div class="d-spy__body">
<h4 class="d-h4">2. 配置环境变量</h4>
<span class="d-spy__ln" style="width:92%"></span>
<span class="d-spy__ln" style="width:80%"></span>
<span class="d-spy__ln" style="width:86%"></span>
<span class="d-spy__ln" style="width:48%"></span>
</div>
</div>