position: sticky 为什么在知乎侧边栏上有效
因为 position: sticky 的触发依赖父容器的滚动范围和自身定位上下文，而知乎侧边栏的父容器（比如 .Layout-main）是页面主要滚动区域，且设置了明确的高度约束或 overflow: visible（默认），让 sticky 元素能感知到视口边界变化。
关键不是“用了 sticky 就会动”，而是它必须满足三个条件：父级可滚动、自身有 top 或 bottom 偏移值、父级不能是 transform / perspective / filter 等创建新层叠上下文的属性——这点最容易被忽略。
-
top: 20px是常见起点，但若侧边栏上方有固定 header，需确保该值 ≥ header 高度，否则会“卡住”在 header 下方 - 父容器不能写
transform: translateZ(0)或will-change: transform，否则 sticky 失效（Chrome/Firefox 均如此） - 如果父容器设了
height: 100vh但内容超长，sticky 可能只在初始视口内吸附，后续滚动失效——应改用min-height: 100vh或不设高度
如何让 sticky 在 Safari 上稳定工作
Safari 对 position: sticky 的兼容性要求更严格，尤其在 iOS 15.4+ 和 macOS Monterey 后版本中，会因某些 CSS 属性组合直接降级为 static。
- 必须给 sticky 元素显式设置
z-index（哪怕只是z-index: 1），否则可能被其他元素遮挡或触发渲染 bug - 避免在 sticky 元素或其任意祖先上使用
backface-visibility: hidden—— 这在 Safari 中会破坏 sticky 行为 - 如果侧边栏嵌套在 Flex/Grid 容器中，确保该容器没设
align-items: stretch以外的值，否则 Safari 可能错误计算粘性临界点 - 测试时打开 Safari 开发者工具 → Elements → 检查 computed 样式，确认
position确实显示为sticky，而非回退成relative
sticky 失效时的快速排查路径
当侧边栏“不动了”，别急着换 JS 方案，先看这四点：
立即学习“前端免费学习笔记（深入）”；
- 检查控制台是否报错
Failed to execute 'getComputedStyle' on 'Window'—— 这往往意味着元素已被移出 DOM 或 display: none - 用浏览器开发者工具选中侧边栏，看
Computed面板里position是否为sticky；如果不是，说明被祖先的transform/filter/opacity 截断了 - 确认父容器是否设置了
overflow: hidden或overflow: auto—— sticky 要求滚动容器是“它自己往上最近的那个可滚动祖先”，不是 body - 检查是否有
contain: layout或contain: paint应用在 sticky 元素或其父级上，这会限制浏览器对粘性行为的计算
要不要 fallback 到 JS 监听 scroll？
纯 CSS position: sticky 已在 Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+ 原生支持，覆盖绝大多数真实用户。JS fallback 仅需应对两类场景：
- 需要兼容 iOS 15.2 及更早 Safari（它们对 sticky 支持极不稳定）
- 侧边栏内容高度动态变化（如展开/收起区块），导致 sticky 临界点偏移，而 CSS 无法响应重排
- 若真要 JS 实现，别用
window.addEventListener('scroll')—— 性能差还抖动，改用IntersectionObserver监听侧边栏与视口顶部的距离变化，再 toggleposition: fixed类
但多数项目里，把 top 值调准、关掉多余 transform、加个 z-index，就足够跑通知乎级侧边栏了。复杂点永远在祖先样式链里，不在 sticky 本身。
