sticky-top 在 iOS Safari 等环境下失效，因父容器 overflow/transform 会切断粘性上下文，且需 -webkit-sticky + 绝对单位 top；绕过方案包括局部 overflow 控制、fixed+占位+IntersectionObserver 降级。
sticky-top 在现代浏览器中表现良好，但遇到 ios safari、旧版 android webview 或父容器设置了 overflow: hidden、transform、will-change 时会直接失效——不是“卡顿”，而是完全不粘。
为什么 sticky-top 会在 iOS Safari 中不工作
iOS Safari（尤其 15.4 之前）对 position: sticky 的实现有两处关键限制：
-
sticky元素的父容器不能有overflow: hidden、auto或scroll，否则粘性行为被静默禁用 - 必须显式声明
-webkit-sticky，仅写sticky不够；且top值不能为百分比（如top: 10%），只接受px、rem等绝对单位 - 若父元素用了
transform（哪怕只是transform: translateZ(0)），也会切断粘性上下文
实操建议：
- 给
.sticky-top元素加双重声明：position: -webkit-sticky; position: sticky; - 确保其**最近的、非
static定位的祖先元素**没有overflow或transform - 在 iOS 上测试时，用
top: 0而非top: 1rem—— 后者在部分 iOS 版本中会被忽略
sticky-top 与 overflow: hidden 冲突的绕过方案
当页面整体或某区块强制设了 html, body { overflow: hidden }（常见于全屏弹层、滑动页），sticky-top 会彻底失活。这不是 bug，是规范行为：粘性定位依赖滚动容器的 scroll event 流，而 overflow: hidden 切断了该上下文。
实操建议：
- 不要全局锁死
body的 overflow，改用局部容器控制，例如只对弹层内部设overflow: hidden - 若必须全局锁，可临时切换：
document.body.style.overflow = 'auto'+document.body.style.position = 'relative'，再用 JS 模拟粘性（见下一条） - 更稳妥的做法：放弃
sticky-top，改用fixed+ 占位元素，配合 IntersectionObserver 控制显示/隐藏时机
降级到 JavaScript 模拟 sticky 的最小可行方案
当兼容性要求覆盖 iOS 14、Android 6 或 IE11 时，sticky-top 必须降级。用 IntersectionObserver 比 scroll 事件更轻量、无抖动，且天然支持异步。
示例逻辑（无需第三方库）：
const nav = document.querySelector('.sticky-top');
const placeholder = document.createElement('div');
placeholder.style.height = `${nav.offsetHeight}px`;
nav.after(placeholder);
const observer = new IntersectionObserver(
([entry]) => {
nav.classList.toggle('is-fixed', !entry.isIntersecting);
},
{ threshold: [0] }
);
observer.observe(placeholder);
CSS 配合：
.sticky-top.is-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 1020;
}
注意点：
- 占位
<div> 必须紧跟在导航后，高度要实时同步（如导航含响应式折叠，需监听 resize 并更新） <li> <code>is-fixed类里不要写left: 0或right: 0—— 容易和 Bootstrap 的栅格 margin/padding 冲突，靠width: 100%+ 父容器约束更稳 - 移动端需额外处理：Safari 滚动时可能触发两次
isIntersecting切换，加个防抖变量即可
真正麻烦的不是写代码，而是判断「该不该用 sticky-top」——如果项目要支持微信内置浏览器（X5 内核）、钉钉或飞书旧版客户端，它们的 WebView 对 sticky 支持极不稳定，这时候直接上 JS 方案反而省调试时间。
