结论：用 position: sticky + 媒体查询控制触发条件更稳更轻量，但需避开 transform/overflow:hidden 等破坏定位上下文的父容器样式，否则在 ios safari 和部分安卓 webview 中会失效或抖动。
直接说结论：用 position: sticky + 媒体查询控制触发条件，比 JS 监听 scroll 更稳、更轻量；但必须避开 transform/overflow:hidden 等破坏定位上下文的父容器样式，否则在 iOS Safari 和部分安卓 WebView 里会失效或抖动。
为什么 sticky 在侧边目录上容易“吸不住”？
不是 sticky 写错了，而是它对祖先元素极其敏感：
- 父容器含
transform（哪怕只是transform: translateZ(0)）、filter、will-change或overflow: hidden，sticky 就会退化为 relative 定位 - 侧边目录常嵌在
.container或.row里，而 Bootstrap 的col类默认用 flex 布局，若外层再套了offcanvas或带缩放的 wrapper，极易触发定位上下文重置 - iOS Safari 15.4 之前不支持嵌套在
transform元素内的 sticky 子项——这点在 Vue/React 组件封装中极隐蔽
桌面端左右布局 + 移动端上下布局怎么切？
别试图让同一个 DOM 同时承担两种角色。用媒体查询分离结构，而不是靠 display: none 切换：
- 桌面端：用
position: sticky; top: 24px;，容器设height: calc(100vh - 48px); overflow-y: auto;，确保有滚动约束 - 移动端：用
@media (max-width: 768px)把侧边目录整体设为position: static，改用offcanvas offcanvas-start d-lg-none独立结构，避免和栅格类混用 - 关键点：
offcanvas必须配max-height: 80vh和overflow-y: auto，否则内容撑高遮罩，点击失效
吸顶后目录项高亮不同步？检查滚动锚点绑定逻辑
sticky 只管“固定”，不管“高亮”。目录项高亮需配合滚动监听，但别直接读 window.scrollY：
- 用
getBoundingClientRect().top判断当前章节是否进入视口，比scrollTop更准，不受父容器 transform 干扰 - 高亮逻辑放在
requestAnimationFrame回调里，避免滚动中频繁重排 - 目录项的
id必须和正文h2标签的id严格一致，且不能含空格或特殊字符（如id="section-1"而非id="Section 1"） - 如果正文用了
margin-top: -80px避免被导航栏遮挡，目录跳转后也要同步 offset，否则高亮位置偏移
移动端点击没反应或抖动？优先排查 touch-action 和占位
iOS Safari 对 fixed/sticky 元素的 touch 区域处理很苛刻：
- 给悬浮目录容器加
touch-action: manipulation，禁用默认的双指缩放/拖拽，提升点击响应 - 若目录右侧父容器有
overflow-x: hidden，会导致 touch 区域错位，临时加padding-right: 1px可修复 - 滚动抖动主因是 sticky 触发时文档流塌陷——确保父容器有明确高度（如
min-height: 100vh），且目录自身不设margin-bottom - 不要在媒体查询里把 sticky 切成 fixed：fixed 会脱离文档流，下方内容必然上移，造成视觉抖动
真正难的不是写 sticky，而是确认整个 DOM 路径上有没有一个看不见的 transform 或 overflow: hidden ——它们往往藏在框架组件、动画库 wrapper 或全局缩放 CSS 里。先查 computed style，再删疑似样式，比补 JS 逻辑更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
