fixed-top导致内容被遮住是因为导航栏脱离文档流，需为后续容器添加pt-5等内边距预留空间；sticky-top失效常因父容器overflow限制或布局问题；移动端问题多源于viewport缺失或定位上下文干扰；滚动触发固定需js动态控制类与padding。
fixed-top 类加了但内容被遮住？这是最常见错误
加了 fixed-top 却发现页面第一段文字从导航栏底下冒出来——不是 bootstrap 有问题，是 fixed 定位让导航脱离文档流，后面的内容直接“顶上去”了。
必须手动给主体内容留出空间：
- 最简单：在紧接
<nav></nav>后的第一个容器（比如<main></main>或<div class="container">）上加 <code>pt-5（对应默认 navbar 高度约 56px） - 如果自定义了 navbar 高度（如
style="height: 72px"），就得换算：72px ≈pt-xxl-4（Bootstrap 5 中pt-xxl-4= 64px，pt-xxl-5= 80px），或直接写pt-6+ 自定义 CSS - 不推荐全局改
body { padding-top: 56px }——响应式下 navbar 高度会变（折叠后、移动端可能更矮），硬编码易错 - 导航栏的**直接父元素**设置了
overflow: hidden、overflow: auto或overflow: scroll—— sticky 会被限制在这个容器内，而非视口 - 外层套了自定义滚动容器（比如某些后台框架的
<div class="layout-main">），这时 sticky 作用域变成那个 div，不是整个页面<li>父容器是 flex 或 grid 布局且未设高度，在 Safari 旧版中可能不触发 sticky（可临时降级为 <code>fixed-top+ JS 控制显隐） -
里有没有这行：<meta name="viewport" content="width=device-width, initial-scale=1">—— 缺失会导致缩放错乱，fixed 参考系偏移 -
或根级容器（如<div class="container">）是否误加了 <code>overflow-x: hidden—— 这会破坏 fixed 元素的定位参考系 -
<nav></nav>内部有没有用position: relative、transform或will-change—— 它们会创建新的定位上下文，导致子元素（如下拉菜单）的 fixed 行为异常 - 监听
window.onscroll，判断window.scrollY >= 200 - 动态给
<nav></nav>切换fixed-top类，并同步控制主体内容的pt-*类（加/删） - 注意：移除
fixed-top时，必须恢复原来的 padding，否则页面会突然上跳 - 别用
position: sticky+top: 200px—— sticky 的top是相对于容器顶部的偏移，不是滚动距离
sticky-top 为什么点不动、滚着滚着就失效？
sticky-top 不是 fixed-top 的平替，它依赖滚动上下文，一不小心就被父容器“截断”。
典型失效场景：
移动端导航栏闪动、下拉菜单点不亮？先查 viewport 和定位干扰
iOS Safari 中 fixed-top 导航栏突然跳动、底部留白、下拉菜单点击无反应，90% 是视口或定位上下文问题。
必须检查：
想“滚动一段再固定”？Bootstrap 没有原生支持
sticky-top 是“粘性吸附”，不是“滚动后固定”。它一进视口就生效，没法设置 200px 后才触发。
真要实现“滚动距离触发”，得靠 JS：
复杂点在于滚动事件高频触发和样式切换的性能，容易卡顿；容易被忽略的是 body padding 的同步还原 —— 这个细节一漏，用户体验就断层了。
