sticky元素没吸顶，主要是父容器未形成可滚动上下文或高度为0；需确保父容器有明确高度、overflow-y:auto、无transform/filter干扰，且sticky元素设top:0和足够z-index。
sticky 元素为什么没吸顶？检查父容器高度和定位上下文
直接加 position: sticky; 没反应，大概率是父容器没形成“滚动容器”或高度为 0。微信通讯录字母吸顶依赖的是：滚动容器（通常是 .contact-list）必须有明确高度且可滚动，同时内部每个 .letter-section 的 top 值要设对（比如 top: 0）。
常见错误：
- 父容器用
height: auto或没设overflow-y: auto，导致 sticky 失去参照边界 - 父容器有
transform、perspective或filter，会创建新的层叠上下文，**中断 sticky 行为**（Chrome/Firefox 均如此） -
sticky元素本身被设置了float、clear或display: table-cell，这些会使其失效
如何让多个字母区块依次吸顶不打架？用 top 和 z-index 配合
微信通讯录里“A”吸顶后，“B”出现时“A”才离开视口顶部——这不是单个 sticky 能自动完成的，需要每个字母块都设 position: sticky; top: 0;，并确保它们按顺序排列、无间隙、同级渲染。
关键点：
- 所有字母标题（如
.letter-header）必须是同一父容器的直系子元素，不能嵌套在其他块内 - 每个
.letter-header需加z-index: 10;（或更高），避免被后续内容遮挡 - 不要给
.letter-header设固定高度以外的margin-bottom，否则吸顶时下方内容会“跳” - 如果用 JS 动态插入区块，确保插入后浏览器已重排（必要时
offsetHeight强制触发）
兼容性与 iOS Safari 的坑：-webkit-sticky 必须写全
iOS 15.4 之前，Safari 对 position: sticky 支持不完整，尤其在 flex 容器或 transform 父级下容易失效。必须显式加前缀：
.letter-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
另外注意：
- iOS Safari 不支持
sticky在table-row上生效，别把字母头塞进<tr> <li>某些低版本微信内置浏览器（X5 内核）仍需降级方案：监听 <code>scroll+getBoundingClientRect()手动切fixed类 - Android WebView（尤其旧版）对
sticky的top计算可能偏移，建议用top: 0而非top: 1px - sticky 元素内避免
width: 100%+box-sizing: border-box组合（某些 Android 浏览器下计算不稳定） - 禁用
transition或animation在.letter-header上，吸顶是瞬时状态切换，加动画反而卡顿 - 如果字母头需高亮背景，用
background-color而非box-shadow（后者触发层合成开销更大）
性能提醒：避免在 sticky 元素里放重绘区域
微信通讯录字母头通常只含纯文本（如 “A”），但有人会加 badge、图标或动画。这些会触发频繁重排重绘，拖慢吸顶响应。
实操建议：
真正难的不是写对 sticky，而是让整套列表在各种机型上滚动时不抖、不闪、不重叠——这取决于父容器的层叠上下文是否干净、滚动区域是否被意外截断，以及有没有无意中触发了强制同步布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
