position: sticky 不吸顶的根本原因是祖先元素设置了 overflow: hidden/auto/scroll 或 transform，切断了粘性定位的锚定链，使其无法相对于视口锚定。
为什么 position: sticky 在列表里不吸顶？
常见现象是加了 position: sticky 和 top: 0，但标题该滚走还是滚走。根本原因不是 CSS 写错了，而是父容器“拦路”了：只要任意一个祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll（哪怕只是 body），就会切断粘性定位的“锚定链”。浏览器会把最近那个有滚动限制的祖先当成粘性边界，而不是视口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具逐层检查祖先节点的
overflow值，特别注意body、#app、列表外层div或框架自带的滚动容器（如 Vue 的<keep-alive></keep-alive>包裹层） - 临时移除可疑的
overflow声明，确认是否恢复吸顶；若不能删，改用overflow: clip（现代浏览器支持，不影响布局又不阻断 sticky） - 确保粘性元素的
top值为具体数值（如top: 0），不能是top: auto或百分比
React/Vue 列表中 sticky 标题频繁重绘或错位
在虚拟滚动、动态加载或条件渲染场景下，标题 DOM 节点可能被复用或卸载，导致粘性状态丢失或位置计算异常。典型表现是：滑动几屏后标题突然跳回顶部、或多个标题同时“卡住”在顶部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个分类标题添加唯一
key（如key={category.id}），避免框架复用不同分类的标题节点 - 禁用对粘性元素的
transform、filter或will-change，这些会创建新层叠上下文，干扰粘性定位的参考系 - 如果用的是
react-window或vue-virtual-scroller，不要把 sticky 标题塞进虚拟区域内部——它必须位于可滚动容器的直接子级，否则无法锚定到容器边界
兼容性与降级：Safari 15.4 之前和旧版 Android WebView 的坑
position: sticky 在 Safari 15.4 之前存在严重 bug：当容器有 transform 或 perspective 时，sticky 元素会完全失效；旧版 Android WebView（尤其 4.4–6.x）则根本不识别该属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (position: sticky)包裹样式，避免影响老浏览器布局流 - 降级方案优先选 JS 监听
scroll+getBoundingClientRect()动态切position: fixed，但注意别在主线程高频重排——加requestIdleCallback或节流到 16ms - 别用
IntersectionObserver做 sticky 降级：它触发时机晚于滚动帧，会出现“闪一下再吸顶”的视觉断裂
多级嵌套分类下，如何让二级标题也吸顶且不压一级？
比如“水果 > 苹果”“水果 > 香蕉”，希望“水果”一直吸顶，“苹果”“香蕉”在“水果”区域内吸顶。纯 CSS 无法实现多级 sticky，因为 sticky 只能相对于**最近的滚动祖先**生效，不是相对于上一个 sticky 元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一级标题用原生
position: sticky，二级标题改用 JS 实现：监听滚动，计算其到一级标题的距离，当距离 ≤ 0 时设为position: fixed并手动设置top值（等于一级标题高度） - 避免用
offsetTop计算位置——它包含边框和 margin，改用getBoundingClientRect().top更可靠 - 滚动容器必须是明确指定高度并带
overflow-y: auto的元素，不能依赖body滚动，否则二级标题的fixed会相对视口而非容器，错位风险极高
真正麻烦的从来不是写一行 position: sticky，而是搞清它到底“粘”在谁身上、又被谁挡住了。每次失效，先查祖先的 overflow 和 transform，比重写逻辑快得多。
