position: sticky侧边栏失效的根本原因是父容器缺乏可滚动上下文和明确边界；必须同时满足：显式设置top值、父容器有高度约束（如max-height）与overflow-y: auto、且不能是无高度的flex/grid子项。
sticky侧边栏为什么滚着滚着就失效了
根本原因不是写法错，而是 position: sticky 依赖父容器的滚动上下文和边界限制。它不会脱离文档流，但必须满足「父容器有可滚动区域」且「元素未超出其包含块的指定边界」才能生效。常见失效场景：父容器没设 height 或 max-height、没加 overflow-y: auto、或者侧边栏本身被设置了 top 但父容器顶部有 margin/padding 挤占了“粘性触发区”。
必须设置的三个关键CSS属性
只写 position: sticky 不够，缺一不可：
-
top值必须显式设置（比如top: 16px），不能是auto或未声明； - 侧边栏的直接父容器必须有明确的高度约束和垂直滚动能力，例如：
max-height: 100vh+overflow-y: auto； - 该父容器不能是
display: flex或grid的子项且自身又没设高度——flex/grid 容器默认不产生滚动上下文，sticky 会找不到“滚动锚点”。
HTML结构里最容易踩的坑
很多人把侧边栏直接塞进 <main> 或 <article>，结果发现它根本不 sticky。真实可用结构通常长这样：
<div class="layout">
<aside class="sidebar"></aside>
<div class="content-scroller"> <!-- 必须是这个 div 承担滚动 -->
<main></main>
</div>
</div>其中 .content-scroller 是 sticky 的参照容器，要加 height: 100vh 或 max-height: 100vh 和 overflow-y: auto；而 .sidebar 要加 position: sticky 和 top: 0（或带偏移值）。
立即学习“前端免费学习笔记（深入）”；
兼容性和性能要注意什么
Chrome 56+、Firefox 59+、Safari 15.4+ 支持良好，但 Safari 15.2–15.3 有渲染抖动 bug，建议加 will-change: transform 缓解；IE 完全不支持，别尝试 polyfill——它本质依赖原生滚动机制。另外，sticky 元素若内部有频繁重排内容（比如实时更新的计数器、动画），可能引发滚动卡顿，建议用 contain: layout paint 隔离渲染影响范围。
真正麻烦的不是怎么写，而是得反复确认：谁在滚动？谁是 sticky 的父块？这个父块有没有被 flex 自动撑高而失去滚动能力？这些细节漏一个，sticky 就静悄悄地不工作。
