sticky定位在侧边目录不生效是因为父容器设置了overflow:hidden、transform或height:100vh等阻止其锚点行为的样式，需改用height:100%、显式高度布局并设置top值。
sticky定位为什么在侧边目录里不生效
常见现象是加了 position: sticky 的目录容器一滚动就消失或卡在顶部不动。根本原因不是写法错，而是 sticky 的生效依赖父容器有明确高度且不溢出隐藏——很多布局里侧边栏父级用了 height: 100vh 或 overflow: hidden，直接废掉 sticky 的锚点行为。
实操建议：
- 确保 sticky 元素的最近**非 static 定位祖先**（通常是侧边栏容器）没有
overflow: hidden、overflow: clip或transform（哪怕只是transform: translateZ(0)） - 侧边栏本身设
height: 100%，而不是100vh；它的父容器（比如.layout）需有显式高度来源，例如display: flex; flex-direction: column+ 主内容区flex: 1 - sticky 元素必须设置
top值（如top: 1rem），且该值不能大于其父容器的 padding-top
导航链接点击后滚动不准或跳过标题
这是 scrollIntoView 默认行为和 DOM 结构不匹配导致的。常见于使用 h2、h3 作为锚点但没设 id，或 id 值含空格/特殊字符，又或者页面用了 CSS scroll-margin-top 却没配好。
实操建议：
- 所有可跳转的标题必须带合法
id，推荐用slugify处理中文或空格（如<h3 id="css-sticky-定位"></h3>→<h3 id="css-sticky-ding-wei"></h3>） - 给标题统一加
scroll-margin-top: 60px（数值要匹配顶部导航栏高度），否则scrollIntoView({ block: 'start' })会把标题顶到视口最顶端，被固定头遮住 - JavaScript 中调用
element.scrollIntoView()时务必传对象参数：{ behavior: 'smooth', block: 'start' }；只传true在 Safari 里可能失效
滚动时目录高亮错位或延迟
高亮逻辑常基于 getBoundingClientRect() 判断元素是否进入视口，但没考虑滚动惯性、防抖不足、或节流太狠，导致判断时机偏移。更隐蔽的问题是：多个同级标题高度不同，或用了 line-clamp 截断，造成 top/bottom 计算偏差。
实操建议：
- 监听
scroll事件时用requestIdleCallback或轻量级防抖（32ms 内最多执行一次），别用 100ms 以上节流，否则快速滚动时高亮明显滞后 - 判断激活项时，别只看
top >= 0 && bottom ；改用「当前标题的 top 小于视口中间，且下一个标题的 top 大于视口中间」更稳 - 如果文档用了
line-height、padding或margin不一致的标题样式，高亮前先用getComputedStyle补偿实际占位高度
移动端 Safari 下 sticky 和 scrollIntoView 表现异常
iOS 15.4+ 修复了部分 sticky bug，但老版本仍存在：sticky 元素在页面缩放或键盘弹出后错位；scrollIntoView 在输入框聚焦后不触发，或滚动距离少一段。
实操建议：
- 对 iOS 加兜底：检测
navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')，对 sticky 区域额外加-webkit-overflow-scrolling: touch到父容器 - 调用
scrollIntoView前，先element.focus()再setTimeout(() => element.scrollIntoView(...), 0)，绕过 Safari 的焦点滚动同步阻塞 - 避免在
resize或orientationchange后立刻重置 sticky 状态；等visualViewport?.height稳定后再操作
真正麻烦的不是怎么写 sticky，而是它和 scroll-margin、scroll-behavior、input 聚焦、viewport 缩放全搅在一起。每个浏览器都挑一个点来坏，得一个个 case 对着修，没法一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
