CSS如何利用Sticky实现类似iOS通讯录的分组吸顶_多级Sticky应用

CSS如何利用Sticky实现类似iOS通讯录的分组吸顶_多级Sticky应用的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

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 技巧制造“错层优先级”：

1. 每个 .section-header 设置不同 top 值（如 top: 0、top: 44px、top: 88px），靠层级和高度差模拟推挤，但维护成本高、响应式难适配
2. 更可靠的做法：只让当前“活跃分组”的 header 真正 sticky，其余设为 position: relative 或 static，由 JS 监听 scroll 实时切换
3. 注意：Safari 对 position: sticky 的祖先元素有严格要求——最近的非 auto 定位祖先不能是 transform、filter、will-change 等触发合成的属性，否则 sticky 失效

用 IntersectionObserver 实现两级 Sticky 切换（推荐）

这是目前最稳定、兼容性好（Chrome 51+/Safari 12.1+/Firefox 55+）、且不阻塞主线程的方案。关键不是“让多个 sticky 同时工作”，而是“只激活一个，其余静默”：

1. 给每个 .section 区块设置 id="section-A"、id="section-B" 等，同时给对应 header 加 data-target="section-A"
2. 用 IntersectionObserver 监听每个 .section 的 boundingClientRect.top 是否 ≤ 视口顶部（比如 ≤ 64px，留出导航栏空间）
3. 当 A 区块进入临界区，激活 A 的 header（position: sticky; top: 64px）；同时确保 B、C 的 header 移除 sticky 或设 top: auto
4. 避免频繁触发：用 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 差异极大，上线前必须真机验证：

1. body 或 html 上不能有 overflow: hidden 或 touch-action: none，否则 sticky 元素可能完全不响应滚动
2. header 内部若含 input 或 textarea，聚焦时 Safari 会重排视口，导致 sticky 错位——解决方案是聚焦时临时移除 position: sticky，失焦再恢复
3. 不要依赖 getBoundingClientRect() 在 scroll 事件里计算位置，iOS WebKit 下该 API 在非主线程调用可能返回过期值；坚持用 IntersectionObserver 替代

多级吸顶不是靠堆砌 sticky 属性实现的，而是靠明确的“当前焦点分组”状态管理。越想一步到位用纯 CSS 解决，越容易掉进 Safari 兼容性和滚动性能的坑里。