iOS通讯录式多级吸顶需用IntersectionObserver实现单激活模式，因纯CSS sticky仅支持单层吸附；须监听区块进入视口临界点，动态切换当前活跃header的sticky状态，避免堆叠与遮挡。
Sticky吸顶在iOS通讯录分组中的核心限制
纯 CSS position: sticky 无法实现 iOS 通讯录那种「多级吸顶」——即字母分组标题吸顶后，当新分组到来时，旧标题向上推挤、新标题接替吸顶位置的效果。浏览器原生 sticky 只支持单层“吸附-释放”逻辑，不支持相邻 sticky 元素的交叠调度。
为什么直接给每个 .section-header 加 sticky 会出问题
常见错误是这样写：
.section-header {
position: sticky;
top: 0;
z-index: 10;
}
结果是：多个 header 同时“卡”在顶部堆叠，视觉混乱；滚动到下一节时，上一节 header 不自动退出，遮挡内容；iOS Safari 下还可能出现闪烁或定位漂移。
根本原因是：top: 0 对所有元素生效条件相同，浏览器不会主动判断“谁该在顶、谁该让位”。必须用 JS 驱动状态切换，或用 CSS 技巧制造“错层优先级”：
立即学习“前端免费学习笔记（深入）”；
- 每个
.section-header设置不同top值（如top: 0、top: 44px、top: 88px），靠层级和高度差模拟推挤，但维护成本高、响应式难适配 - 更可靠的做法：只让当前“活跃分组”的 header 真正 sticky，其余设为
position: relative或static，由 JS 监听 scroll 实时切换 - 注意：Safari 对
position: sticky的祖先元素有严格要求——最近的非auto定位祖先不能是transform、filter、will-change等触发合成的属性，否则 sticky 失效
用 IntersectionObserver 实现两级 Sticky 切换（推荐）
这是目前最稳定、兼容性好（Chrome 51+/Safari 12.1+/Firefox 55+）、且不阻塞主线程的方案。关键不是“让多个 sticky 同时工作”，而是“只激活一个，其余静默”：
- 给每个
.section区块设置id="section-A"、id="section-B"等，同时给对应 header 加data-target="section-A" - 用
IntersectionObserver监听每个.section的boundingClientRect.top是否 ≤ 视口顶部（比如 ≤ 64px，留出导航栏空间） - 当 A 区块进入临界区，激活 A 的 header（
position: sticky; top: 64px）；同时确保 B、C 的 header 移除 sticky 或设top: auto - 避免频繁触发：用
threshold: [0]+rootMargin: "-64px 0px 0px 0px"精确控制触发时机
示例关键逻辑：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
const sectionId = entry.target.id;
const header = document.querySelector(`[data-target="${sectionId}"]`);
if (entry.isIntersecting && entry.boundingClientRect.top <= 64) {
header.classList.add('is-sticky');
} else {
header.classList.remove('is-sticky');
}
});
},
{ rootMargin: '-64px 0px 0px 0px', threshold: [0] }
);
移动端真机调试最容易忽略的三个点
iOS Safari 的 sticky 表现和桌面 Chrome 差异极大，上线前必须真机验证：
-
body或html上不能有overflow: hidden或touch-action: none，否则 sticky 元素可能完全不响应滚动 - header 内部若含
input或textarea，聚焦时 Safari 会重排视口，导致 sticky 错位——解决方案是聚焦时临时移除position: sticky，失焦再恢复 - 不要依赖
getBoundingClientRect()在 scroll 事件里计算位置，iOS WebKit 下该 API 在非主线程调用可能返回过期值；坚持用IntersectionObserver替代
多级吸顶不是靠堆砌 sticky 属性实现的，而是靠明确的“当前焦点分组”状态管理。越想一步到位用纯 CSS 解决，越容易掉进 Safari 兼容性和滚动性能的坑里。
