Bootstrap 5 的 sticky-top 在移动端失效，主因是父容器 overflow-y 被设为 hidden 导致无滚动上下文，尤其 iOS Safari 对滚动容器极其敏感，需确保直接父容器有显式高度和 overflow-y: auto。
Bootstrap 5 的 sticky-top 在移动端不生效，大概率不是你写错了类名，而是父容器的 overflow 被隐式截断了——尤其在 iOS Safari 下，它对滚动上下文极其挑剔。
为什么 sticky-top 在移动端常被 overflow-y: hidden 拦住
sticky-top 本质是 position: sticky; top: 0 的封装，而 sticky 行为必须依赖「可滚动的最近祖先」。如果这个祖先（比如 <body> 或某个 <div class="container">）设置了 overflow-y: hidden，浏览器就认为“这里不能滚”，sticky 直接退化为普通定位。
常见误操作：
- 用
overflow-x: hidden防止横滚，却顺手加了y方向限制 - 第三方 UI 库或重置 CSS（如 normalize.css）悄悄给
html或body加了overflow: hidden - Vue/React 根节点（
#app）设了height: 100%但没配overflow-y: auto，导致内部 sticky 元素找不到滚动边界
检查和修复 overflow 的实操路径
打开 DevTools → Elements → 逐级向上查 sticky 元素的父节点，重点看 html、body、<main>、<div class="wrapper"> 这几层的 computed styles 中 overflow-y 值是否为 hidden 或 clip。
立即学习“前端免费学习笔记（深入）”；
修复建议：
- 移除
body上的overflow-y: hidden；若必须隐藏，改用overflow-y: clip（仅现代浏览器支持）或换到更内层容器上 - 确保 sticky 元素的**直接父容器**有明确高度（如
height: 100vh或max-height: 100vh）且overflow-y: auto - 在 iOS Safari 下，
body本身不能作为 sticky 的滚动容器 —— 把滚动逻辑收束到一个子容器里，例如：<div id="scroll-root" style="height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;"> <nav class="navbar sticky-top">...</nav> <main>...</main> </div>
移动端必须加的兼容性补丁
iOS Safari（尤其是 15.4 之前）不认标准 position: sticky，需手动加前缀：
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
}
另外，top: 0 必须显式声明，不能靠 inset 或 margin-top 替代；也不能放在 display: flex 容器里且未设 align-items —— Safari 会直接忽略 top 值。
sticky-top 和 fixed-top 的 overflow 影响完全不同
fixed-top 不依赖滚动上下文，它只看视口，所以对 overflow 不敏感；但 sticky-top 是“条件触发”的：父容器没滚动能力，它就永远静止不动。这意味着你在桌面端调通了 sticky-top，不等于移动端也 OK —— 移动端的滚动容器层级、viewport 设置、甚至 Safari 的渲染策略都可能让同一套 HTML/CSS 表现迥异。
最易被忽略的一点：即使你把 overflow-y: auto 加到了正确容器上，如果该容器没有「实际内容撑高」或「显式 height」，iOS Safari 仍可能判定它不可滚动，sticky 就不会激活。
