最常见原因是父容器缺少滚动上下文且未设top值：需确保父元素有显式高度与overflow-y:auto，同时sticky元素必须声明top/bottom等偏移值，任一缺失都会导致退化为static。
为什么写了 position: sticky 却没效果
最常见原因是漏掉了生效硬性条件——position: sticky 不是“设了就粘”，它必须同时满足：父容器有明确滚动上下文、自身设了 top/bottom 偏移、祖先无 transform/filter 等中断行为。任意一条不满足，浏览器就当它是个普通 relative 元素处理。
典型表现包括：侧边栏完全随页面滚动、只在某一段距离内“卡一下”就继续走、或者直接消失不见。这不是 CSS 写错了，而是布局链断了。
- 用 DevTools 选中侧边栏，看 Computed 面板里
position是否真解析为sticky（可能被其他规则覆盖） - 临时把侧边栏直系父元素的
overflow改成visible测试，若恢复粘性，说明原overflow: auto/hidden是罪魁 - 检查从侧边栏向上直到
body的所有祖先，是否存在transform、perspective、filter或contain: layout style paint
top 值怎么设才合理
top 不是装饰项，它是触发粘性的临界点。设为 0 会让侧边栏贴顶，但大概率会盖住 header；设得太大（如 100px），又可能在内容较短时根本触发不了。
推荐做法是让 top 值等于页面顶部固定区域的高度，比如导航栏高 64px，那就写 top: 64px。这样侧边栏会在导航栏下方开始吸附，不遮挡也不悬空。
立即学习“前端免费学习笔记（深入）”；
- 移动端需额外考虑键盘弹出或横屏切换导致视口高度变化，
top建议用rem或vh单位，避免死值 - 若侧边栏放在
flex容器中，加align-self: start防止 Safari 下被拉伸变形 - 不要依赖
offsetTop计算位置——sticky 后该值不再随滚动更新，JS 监听要用getBoundingClientRect()
父容器为什么必须有高度+overflow
position: sticky 的“粘”不是相对于视口，而是相对于**最近的可滚动祖先容器**。如果父容器没有显式高度限制（如 height: 100vh 或 max-height: calc(100vh - 64px)），也没有 overflow-y: auto，浏览器就找不到滚动边界，自然无法判断“何时该粘”。
尤其注意：html 和 body 默认没有计算高度，height: 100% 在它们身上无效，必须显式声明 html, body { height: 100%; margin: 0; } 才能让子级 flex 布局撑满。
- 用
display: grid或flex布局主容器时，侧边栏需配flex: 0 0 auto，内容区用flex: 1占剩余空间 - 侧边栏内部若内容过长，加
height: fit-content防止 Chrome 下意外撑高父容器、破坏滚动 - 别在侧边栏父级上加
overflow: hidden——这是最隐蔽的失效原因，尤其在 modal、card 等组件里容易误加
iOS Safari 和老版本浏览器的坑
iOS Safari ≤ 15.4 对 flex 容器内的 sticky 支持极不稳定，常表现为初始偏移错位、滚动中突然脱钩、或只在部分滚动距离内生效。这不是 bug，是渲染引擎对 flex 主轴对齐和 sticky 定位耦合逻辑的已知限制。
实操上，Safari 要求 sticky 元素的直接父容器至少有 align-items: flex-start 或 min-height: 0，否则会错误继承高度并干扰粘性计算。
- 真机测试比模拟器可靠得多，iOS 模拟器对 sticky 行为模拟不准
- IE 完全不支持，
@supports (position: sticky)必须加，降级方案建议用getBoundingClientRect()+requestAnimationFrame切换fixed，而非粗暴的 scroll 事件直改样式 - Android WebView 中
bottom表现不一致，侧边栏优先用top，避免用bottom做吸附
真正难的不是写那几行 CSS，而是排查哪一层祖先悄悄加了 transform、哪个父容器忘了设 max-height、或者 Safari 正在默默忽略你写的 align-items。这些细节不爆出来，问题就永远在“看起来没错”的地方卡着。
