sticky标题“跳一下”是因为父容器触发新层叠上下文（如transform、filter等）导致position: sticky失效，退化为普通定位；多sticky头部互相覆盖需用relative容器隔离z-index；ios旧版存在渲染限制，高频滚动下建议用getboundingclientrect+requestanimationframe实现伪吸附。
sticky标题在联系人列表里为什么总“跳一下”
因为 position: sticky 的吸附行为依赖父容器的滚动上下文，而联系人列表常嵌套在 overflow: hidden 或 transform 触发新层叠上下文的容器里——这时 sticky 就失效了，浏览器会退化成普通定位，视觉上像“跳开”或“卡住”。
常见场景：用 flex 布局做侧边栏 + 主内容区，主区加了 transform: translateZ(0) 优化渲染，结果所有 sticky 标题全不吸附。
- 检查父级是否含
transform、perspective、filter或will-change——这些都会创建新层叠上下文，阻断 sticky 向上找滚动容器 - 确保滚动容器是直接父级（或最近的、有
overflow-y: auto/scroll的祖先），不是 body - 给 sticky 元素设明确的
top值（比如top: 0），且不能是auto
多个 sticky 头部如何避免互相覆盖
当每个字母分组（A、B、C…）都有自己的 sticky 标题时，后一个会盖住前一个——这不是 bug，是 sticky 的自然堆叠行为：它们都在同一层叠上下文中，按 DOM 顺序排列，后出现的 z-index 更高。
解决办法不是加 z-index，而是让每个标题“只在自己范围内生效”：
立即学习“前端免费学习笔记（深入）”；
- 给每个分组容器（如
.group-A）设置position: relative和z-index: 1 - 把 sticky 标题放在该容器内，并设
z-index: 2，这样它只和同组内容竞争，不跨组干扰 - 避免全局统一
z-index值；不同分组用递增值（z-index: 10,z-index: 20）也行，但不如用相对容器隔离干净
移动端 Safari 中 sticky 标题闪动或失效
iOS 15.4+ 修复了大部分 sticky 问题，但老版本（尤其 iOS 13–14）对 sticky 支持不稳定，典型现象是：快速滚动时标题闪烁、位置偏移、甚至完全不固定。
这不是代码写错了，是渲染管线限制：
- 避免在 sticky 元素上使用
backface-visibility: hidden或opacity动画，这会触发合成层切换，打断 sticky 计算 - 给滚动容器加
-webkit-overflow-scrolling: touch（仅 iOS - 如果必须兼容 iOS 13，改用 JS 监听
scroll+getBoundingClientRect()手动切fixed状态，但注意性能损耗
性能敏感场景下 sticky 的替代方案
当联系人列表超长（>1000 条）、又频繁滚动时，每个 sticky 标题都会触发 layout 重排，尤其在低端安卓机上容易掉帧。
更轻量的做法是放弃 CSS sticky，改用“伪吸附”：
- 监听滚动，用
element.getBoundingClientRect().top判断标题是否将要出顶视口 - 当
top ≤ 0且bottom > 50（留点缓冲），给标题加position: fixed+ 动态top - 配合
requestAnimationFrame节流，避免 scroll 事件高频触发 - 示例关键逻辑：
const observer = new IntersectionObserver(...); // 或用 getBoundingClientRect + rAF
复杂点在于滚动方向判断和边界处理——比如用户猛拉回滚时，标题得及时“松手”变回 static，否则会悬在半空。这个细节，多数人第一次写 JS 替代方案时会漏掉。
