sticky未生效主因是父容器触发层叠上下文或设置overflow非visible，导致可滚动祖先错误；需确保sticky元素的最近可滚动祖先内容实际溢出且无干扰transform/filter。
sticky 在长列表中为什么没反应
直接给 .category-title 加 position: sticky; top: 0; 却不吸顶，大概率是父容器触发了层叠上下文或设置了 overflow: hidden|auto|scroll —— 这会截断 sticky 的定位参考流。sticky 不是脱离文档流的定位，它依赖最近的「可滚动祖先」作为容器边界，而 overflow 非 visible 的父元素会成为这个边界，一旦该父容器高度不够或未滚动，top 就失效。
常见错误结构：
<div class="list-wrapper" style="overflow: auto; height: 400px;"> <div class="category-title">水果</div> <div>苹果</div> <div>香蕉</div> <div class="category-title">蔬菜</div> <div>白菜</div> </div>
此时 sticky 只在 .list-wrapper 内部生效，但该容器本身没滚动（内容没溢出），所以标题永远“卡”在初始位置。
- 确保滚动容器是 sticky 元素的**最近可滚动祖先**，且内容实际溢出
- 避免在 sticky 元素的任意直系父级上设置
overflow: hidden|auto|scroll（除非你明确要限制其作用域） - 若必须嵌套滚动容器，请把 sticky 元素提升到目标滚动容器的直接子级
循环渲染时 category-title 怎么避免错位
React/Vue 等框架中动态生成列表时，.category-title 和后续 item 共享同一父容器，但 sticky 行为只认 DOM 层级和滚动上下文，不认逻辑分组。如果多个标题紧挨着出现（比如相邻分类之间无 item），它们会互相挤压，导致吸顶后重叠或跳动。
立即学习“前端免费学习笔记（深入）”；
关键约束：sticky 元素在吸顶状态下仍占据原始文档流位置，后续元素会“感知”到它还在那儿。因此必须保证每个 .category-title 后至少有一个非 sticky 兄弟元素（哪怕只是空占位），否则浏览器可能合并布局或触发异常重排。
- 在循环中，对每个分类标题单独包裹一层，例如：
<div class="category-group"><div class="category-title">...</div><div class="item-list">...</div></div> - 为
.category-title设置z-index: 10（避免被后续 item 的阴影/背景遮盖） - 添加
height: min-content或固定min-height，防止标题因字体加载、行高计算差异导致高度抖动
兼容性与 iOS Safari 的 sticky 失效问题
iOS Safari（尤其 15.4 之前）对 sticky 的支持有隐藏限制：如果 sticky 元素的父容器使用了 transform、perspective 或 filter，即使值为 none，也会使 sticky 完全失效。另外，某些 Vue 的 v-for 动态 key 或 React 的 memo 包裹也可能意外引入 will-change: transform。
排查方式：在 Safari 开发者工具中检查 sticky 元素的 computed styles，看 position 是否被降级为 static；再逐层检查父级是否有隐式 transform。
- 移除所有父级的
transform、filter、will-change声明（包括框架注入的） - 在 iOS 上测试时，用
position: -webkit-sticky+position: sticky双写（虽然现代 Safari 已不需要，但老版本仍需） - 若仍不稳定，降级方案：监听 scroll，用
getBoundingClientRect().top判断是否进入视口，手动切换position: fixed—— 但注意 fixed 会脱离流，需预留占位空间
性能隐患：大量 sticky 元素拖慢滚动帧率
当列表含上百个 .category-title 且全部设为 sticky 时，浏览器需在每次滚动时重新计算每个元素的粘性状态，尤其在低端 Android 设备上容易掉帧。这不是 CSS 本身的问题，而是 layout thrashing 的典型场景。
真正需要吸顶的，永远只是当前视口附近那 1–2 个标题。其余标题可以临时解除 sticky，等接近视口时再激活。
- 用
IntersectionObserver监听标题进入/离开视口，动态增删is-sticky-active类，仅对该类启用position: sticky - 为每个标题设置
data-index，配合节流后的scroll事件做粗略范围判断（如scrollTop在某区间内才激活） - 避免对
:nth-child(odd)这类选择器批量应用 sticky，CSS 引擎无法跳过未匹配项的计算
吸顶不是越“多”越好，而是越“准”越稳。多数情况下，一个分类标题只需在它第一个 item 出现在顶部时开始吸顶，直到下一个标题即将顶上来为止——这个时机点，比一行 CSS 更难拿捏。
