Sticky定位为什么在字母索引里突然失效
常见现象是滚动时 position: sticky 完全不触发，分组头“沉底”或卡死不动。根本原因不是CSS写错了，而是父容器没满足 sticky 的前提条件：它必须有可滚动的父级，且该父级不能有 overflow: hidden 或 overflow: clip（哪怕只是隐式继承），也不能是 document 根节点直接子元素（比如 <body> 下第一层 div）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把字母索引列表包进一个明确设了
height和overflow-y: auto的容器里，别依赖 body 滚动 - 检查所有上级元素的
overflow值，包括html和body—— Safari 对overflow-x: hidden也会干扰 sticky 行为 - 确保 sticky 元素的
top值合理，比如top: 0是最稳妥的；top: 1px在某些安卓 WebView 下会失灵
letter-group-header 怎么避免被上一组遮挡
当多个分组头高度接近、滚动速度较快时，上一个 sticky 头还没完全退出视口，下一个就顶上来，造成视觉重叠。这不是 bug，是 sticky 的正常行为 —— 它只管自己“吸附”，不管兄弟元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个
.letter-group-header加z-index，并用 JS 动态更新：滚动时让当前吸附中的 header 的z-index高于其他（比如固定值z-index: 10不够，得用z-index: 999 + index） - 更轻量的做法是加
margin-bottom: -1px，利用层叠顺序让后出现的 header 自动压住前一个（前提是它们没有设置z-index） - 别用
transform: translateY()模拟 sticky —— 会破坏原生吸附逻辑，且无法响应 scroll event
如何让 A-Z 索引头真正“吸住”且不跳变
滚动过程中 header 突然“抖一下”或“跳一格”，通常是由于内容重排（reflow）触发的。典型诱因是：header 内部文字换行、字体加载完成、或 JS 动态插入内容导致高度变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.letter-group-header设定固定height和line-height，禁用flex或grid布局带来的弹性伸缩 - 字体用
@font-face预加载，并加font-display: swap避免 FOIT 导致高度突变 - 避免在 header 里放图标或 badge —— 如果必须放，用
inline-block+ 固定宽高，不要用img或svg自适应尺寸
兼容性兜底：Safari iOS 15.4 以下和旧版 Android WebView
这些环境对 position: sticky 支持不完整，尤其在 transform 父容器下、或嵌套 iframe 中直接失效。错误表现是 header 一直固定在初始位置不动，或者随滚动一起消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (position: sticky)做 CSS 分层，不支持时降级为position: relative+ JS 监听scroll手动计算top - JS 方案别用
getBoundingClientRect()频繁调用 —— 改用IntersectionObserver监听每个分组进入视口的时机，再切换 active header 的 class - 注意：iOS Safari 的
IntersectionObserver在页面顶部有 fixed header 时可能误判，需加rootMargin: '-64px'补偿
真正难的不是写出 sticky，而是让不同字母组之间的吸附边界清晰、无视觉撕裂 —— 这要求 header 高度绝对一致、滚动容器边界干净、且所有设备都走同一套判定逻辑。稍有松动，用户就会觉得“卡”或者“粘不住”。
