Bootstrap 5 的 sticky-top 在移动端失效，主因是父容器 overflow-y 被设为 hidden 导致无滚动上下文，尤其 iOS Safari 对滚动容器极其敏感，需确保直接父容器有显式高度和 overflow-y: auto。
Bootstrap 5 的
在移动端不生效，大概率不是你写错了类名，而是父容器的
被隐式截断了——尤其在 iOS Safari 下，它对滚动上下文极其挑剔。
为什么 sticky-top 在移动端常被
overflow
-y: hidden 拦住
本质是
的封装，而 sticky 行为必须依赖「可滚动的最近祖先」。如果这个祖先（比如
或某个
sticky-topoverflowsticky-topposition: sticky; top: 0
）设置了
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
、
这几层的 computed styles 中
overflow-y
值是否为
hidden
或
clip
。
立即学习
“
前端免费学习笔记（深入）
”；
修复建议：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
移除
body
上的
overflow-y: hidden
；若必须隐藏，改用
overflow-y: clip
（仅现代浏览器支持）或换到更内层容器上
确保 sticky 元素的**直接父容器**有明确高度（如
height: 100vh
或
max-height: 100vh
）且
overflow-y: auto
在 iOS Safari 下，
body
本身不能作为 sticky 的滚动容器 —— 把滚动逻辑收束到一个子容器里，例如：
...
移动端必须加的兼容性补丁
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 就不会激活。