仅用 position: fixed 无法自动高亮当前楼层，因其仅实现定位，不感知滚动；必须结合 javascript 的 scroll-spy 逻辑判断滚动位置并动态添加高亮类。
position: fixed 能实现侧边楼层导航的“始终可见”，但仅靠它无法自动高亮当前楼层；真正联动滚动与高亮，必须配合 JavaScript 的 scroll-spy 逻辑——CSS 本身不感知滚动位置。
为什么只用 position: fixed 不够
给侧边导航容器加 position: fixed 确实能让它钉在视口一侧，但它的子项（如各楼层链接）不会随滚动自动激活。所谓“楼层导航”核心是「滚动到某区块时，对应导航项高亮」，这属于行为判断，CSS 无状态、无事件响应能力，必须由 JS 驱动。
- 常见错误：只写
.sidebar { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); }，结果点击能跳转，但滚动时从不高亮 -
fixed元素脱离文档流，其内部:hover或伪类无法反映页面滚动状态 - 若误用
position: sticky替代，又容易因父容器overflow: hidden或transform导致完全不生效
scroll-spy 高亮逻辑的关键判断条件
高亮不准、延迟或跳变，往往出在判断“当前在哪一层”的阈值设计上。别用简单的 getBoundingClientRect().top ，它对有固定头、line-height 不一致、或用了 <code>scroll-margin-top 的标题极不友好。
- 推荐判断方式：
当前标题的 top window.innerHeight / 2，以视口垂直中线为锚点，抗抖动更强 - 必须提前为每个目标区块（如
<h2 id="section1"></h2>）设置scroll-margin-top，值等于顶部固定导航栏高度（如scroll-margin-top: 60px），否则scrollIntoView会把标题顶到视口最顶，被遮住 - 监听
scroll时务必用requestIdleCallback或轻量防抖（如setTimeout(..., 32)），避免 100ms 节流导致快速滚动时高亮滞后
fixed 侧边栏在响应式断点中的重置要点
大屏用 fixed，小屏切到底部或收起，不是只改 position 就完事。漏掉关键重置项会导致定位错乱或层级异常。
- 必须显式设
top: auto和right: auto（或bottom: 0），否则大屏样式残留参与计算 -
z-index要统一规划：底栏需高于主内容但低于弹窗，建议用语义化值如z-index: 10（底栏）、z-index: 100（弹窗），而非9999 - 小屏下若保留可滚动菜单，得加
overflow-y: auto; max-height: 200px，否则撑爆 viewport - 所有内边距（
padding/margin）不要依赖定位方式隐式继承，全部用独立 class 控制
锚点跳转时 scrollIntoView 的兼容写法
直接调 element.scrollIntoView(true) 在 Safari（尤其 iOS
- 必须传对象参数：
element.scrollIntoView({ behavior: 'smooth', block: 'start' }) -
block: 'start'配合scroll-margin-top才能精准停在可视区安全位置 - 目标元素必须有合法
id：不能含空格、中文、特殊字符；中文标题建议用slugify处理，如<h2 id="前端入门"></h2>→<h2 id="qian-duan-ru-men"></h2> - 避免用
name属性模拟锚点，HTML5 已废弃，现代浏览器支持度差
最易被忽略的是：高亮逻辑和锚点跳转是两套独立系统，但共享同一组 id 和 scroll-margin-top 设置。改一处，两处都得同步验证——尤其是当文档结构动态生成或标题高度不一时，偏差会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
