Bootstrap 5 的 sticky-top 在 iOS Safari 中常因 overflow-x: hidden、transform 等触发渲染 bug 而失效，需删禁用属性、确保父容器高度充足，并用 JS 监听 scroll 降级 fixed-top 作为兜底。
Bootstrap 5 默认不支持 sticky-top 在移动端 Safari 上可靠工作，必须手动补兼容、加兜底逻辑。
为什么 sticky-top 在 iOS Safari 里经常失效
这是个长期存在的渲染 bug：iOS Safari 对 position: sticky 的父容器高度、overflow 或 transform 属性极其敏感。常见触发场景包括：body 有 overflow-x: hidden、导航栏嵌套在 transform: translateZ(0) 容器里、或页面存在第三方库注入的 CSS 重置规则。
- 检查是否用了
body { overflow-x: hidden; }—— 这是最大元凶，删掉或改用overflow-x: clip - 确保导航栏直接挂载在
<body>下，或其最近非static父元素高度足够（不能是height: 0或display: none） - 避免给导航栏或其祖先加
transform、filter、will-change等合成层属性
用 position: sticky + Bootstrap 类的最小可行写法
Bootstrap 5 的 sticky-top 本质就是封装了 position: sticky 和 top: 0，但依赖正确 DOM 结构和 CSS 环境：
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">My App</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
- 必须加
sticky-top类，不能只靠自定义 CSS 写position: sticky -
top值默认为0；如需留出状态栏/刘海区，改用sticky-top-1（需 Bootstrap 5.3+）或自定义类：.sticky-top-safe { top: env(safe-area-inset-top); } - 若导航栏在
<header>或其他包裹容器中，该容器必须有明确高度且未设overflow: hidden
iOS 兜底方案：监听 scroll 手动切换 fixed
当 sticky-top 不稳定时，最稳妥的方式是降级为 JS 控制 position: fixed，并动态修正 body 滚动偏移：
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar.offsetHeight;
window.addEventListener('scroll', () => {
if (window.scrollY >= navbarHeight) {
navbar.classList.add('fixed-top');
document.body.style.paddingTop = `${navbarHeight}px`;
} else {
navbar.classList.remove('fixed-top');
document.body.style.paddingTop = '';
}
});
- 务必用
fixed-top而非手写position: fixed，否则会丢失 Bootstrap 的响应式断点适配 - 必须设置
body的padding-top，否则页面内容会上滑遮挡导航栏 - 如果导航栏高度随屏幕缩放变化（比如含 responsive 字体），应在
resize事件中重新计算navbarHeight
真正麻烦的不是加 sticky-top，而是验证它在所有目标设备上都生效——尤其要真机测 iOS 16+ 的 Safari，模拟器经常骗人。
