sticky标题折叠遮挡内容的本质是其脱离文档流不占空间，导致后续内容上移；解决思路一是用伪元素或空div静态预留占位高度，二是用IntersectionObserver监听吸顶状态动态添加padding-top。
sticky 标题折叠后遮挡内容，本质是 sticky 元素脱离文档流、不占空间，导致后续内容上移“钻到”它底下。解决核心思路有两个：要么提前给它预留空间（静态占位），要么实时感知它的状态并动态调整（如折叠时加 padding-top）。下面说具体怎么做。
用伪元素或空 div 预留固定占位高度
最简单稳定的方式——在 sticky 标题前或后插入一个与它高度一致的占位块。这样即使标题吸顶，下方内容也不会上移。
- 推荐用伪元素：::before 或 ::after 加在 sticky 容器的父级上，设置 height 等于标题高度（比如 60px），避免额外 DOM
- 如果标题高度会变（比如响应式字号/行高），就用 JS 获取真实 clientHeight 后写入内联 style，再让伪元素继承该值
- 注意：占位块必须和 sticky 元素同级或紧邻，且不能被 overflow: hidden 截断
用 IntersectionObserver 监听吸顶状态，动态加 offset
当标题真正吸顶（top === 0）时，给内容区域加一个等于标题高度的 padding-top；离开吸顶态时再清掉。比纯 CSS 更精准，适合复杂滚动场景。
- 监听 sticky 元素的 boundingClientRect.top，当 ≤ 0 时认为已吸顶
- 为避免抖动，建议加 threshold: [0] 并节流处理，或用 getBoundingClientRect().top 判定
- padding-top 加在内容区（比如 main 或 .content），不是 body，否则影响全局布局
慎用 position: sticky 的替代方案
如果项目对兼容性要求不高（iOS 15.4+ / Chrome 80+），sticky 本身没问题；但若遇到 Safari 折叠异常、或需要支持老版本，可考虑降级：
立即学习“前端免费学习笔记（深入）”；
- 用 position: fixed + JS 手动控制 top 和 transform，配合 requestAnimationFrame 做平滑滚动监听
- 用 CSS container queries + scroll-margin-top 配合锚点跳转，适合单页内锚点导航场景
- 避免混用 sticky 和 transform、will-change，这些可能触发渲染 bug 导致吸顶失效或遮挡
基本上就这些。占位法快而稳，适合多数情况；IntersectionObserver 更灵活，适合需要精确控制或动态高度的标题。选哪个，看你的标题是否固定高、是否要兼容老浏览器、以及滚动逻辑是否复杂。
