position: sticky 实现导航栏吸顶需满足三条件：必须设置 top: 0（或对应偏移值）；父容器不能有 overflow: hidden、transform 或 will-change 等中断滚动上下文的样式；页面须有足够高度内容触发滚动吸附。
导航栏结构必须用
用 position: sticky 实现滚动吸附时，<nav></nav> 必须是文档流中正常嵌套的语义化元素。常见错误是把它塞进一个加了 transform: translateZ(0) 或 overflow: hidden 的 wrapper 里——这会直接让 sticky 失效，导航永远不“粘”。
移动端还要额外检查：父容器是否设置了 will-change: transform，iOS Safari 对这个特别敏感，删掉就能恢复粘性。
- 正确结构：
<header><nav>...</nav></header>，<nav></nav>直接子级 - 错误结构：
<div style="transform: scale(1)"><nav>...</nav></div> - 如果必须用 wrapper，改用
position: fixed+ 手动占位，别硬扛 sticky
锚点目标元素的id必须唯一、小写、无空格，且与href值完全一致
点击目录项跳不到对应位置？90% 是因为 href 和 id 对不上。浏览器对大小写和空格敏感，href="#Section1" 找不到 id="section1"，也匹配不了 id="section 1"（含空格非法）。
动态生成内容时更危险：多个组件重复渲染出相同 id="contact"，document.getElementById('contact') 只返回第一个，后续所有跳转都指向它。
立即学习“前端免费学习笔记（深入）”；
- 生成 id 建议用短横线小写：
id="faq-privacy"，而非驼峰或下划线 - 服务端渲染或 JS 拼接时，加一层校验：
if (!el.id || el.id.includes(' ')) console.warn('invalid id:', el.id) - 用 CSS 选择器替代
getElementById时，注意querySelector('[id="section1"]')能绕过重复 id 限制
滚动高亮逻辑必须用IntersectionObserver，别监听scroll事件
用 window.addEventListener('scroll', ...) 做菜单高亮，页面一滚动就卡顿，尤其在低端安卓机上。不是代码写得不够好，是 scroll 事件本身太高频，每次触发都要调 getBoundingClientRect()，强制同步重排。
IntersectionObserver 不仅性能好，还能天然处理缩放、字体加载延迟等边界情况。关键参数只有两个：阈值设 threshold: 0.1（10% 进入视口即激活），且每个 section 必须有唯一 id。
- 不要给多个 section 设同一个 id，否则
document.querySelector(`a[href="#${id}"]`)总是命中第一个 - 如果顶部有固定导航栏，高亮时机要提前：把
threshold提高到0.2或更高，避免用户刚看到标题就切走 active 状态 - 首次加载时手动触发一次
observer.observe()，否则首屏元素可能不被监听
平滑滚动偏移必须用scroll-margin-top，别在scrollIntoView里算offsetTop
想让滚动停在导航栏下面？很多人写 el.scrollIntoView({ block: 'start', behavior: 'smooth' }) 后发现还是被遮住，然后去 JS 里手动减去 60px 高度——这方法在 Safari 和部分安卓 WebView 上会失效，因为 offsetTop 受父级 transform 影响，计算结果不准。
真正可靠的是纯 CSS 方案：scroll-margin-top: 60px 加 scroll-behavior: smooth。前者作用于目标元素自身，后者作用于根元素，两者配合，浏览器自动修正滚动终点。
- 只对目标元素设
scroll-margin-top，对父容器或 body 设无效 - 如果导航高度不固定（比如响应式折叠后变矮），改用 JS 动态写内联样式：
target.style.scrollMarginTop = nav.offsetHeight + 'px' - IE 完全不支持这两个属性，需降级为
window.scrollTo({ top: target.offsetTop - 60, behavior: 'smooth' })，但要加 try/catch 防止报错
滚动联动的本质不是“让 JS 算得更准”，而是让浏览器自己管好滚动终点和视口关系。很多问题看似是定位不准，其实是布局约束没理清——比如 sticky 被父容器拦住、id 重复导致查询失焦、或者用同步计算硬扛异步加载。这些地方一松动，整个联动就断链。
