Bootstrap 4起已移除navbar-fixed-top类，改用fixed-top类实现顶部固定导航栏，需确保nav为顶层元素并手动添加padding-top预留空间。
为什么 navbar-fixed-top 不再可用？
bootstrap 4 及之后版本彻底移除了 navbar-fixed-top 这类旧版工具类，直接加它不会生效。这不是你写错了，是 bootstrap 改用更可控的 css 定位方案——现在必须靠 fixed-top 类配合正确的 dom 结构和间距处理。
用 fixed-top 实现真正悬浮导航栏
这是当前最简、最可靠的实现方式，但有几个硬性前提：
-
<nav>必须是页面最顶层的兄弟元素（不能嵌在<header>或其他容器内），否则固定后会遮挡后续内容 - 必须手动给
<body>加上pt-5（或类似 padding-top）来腾出导航栏高度空间，否则首屏内容会被遮住 - 如果用了自定义高度（比如
style="height: 72px"），padding 值得同步调整，不能只依赖默认的pt-5
示例结构：
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <a class="navbar-brand" href="#">Logo</a> <div class="collapse navbar-collapse">...</div> </nav> <div class="container pt-5"><!-- 这里开始正文 --></div>
滚动时让导航栏变色或缩小？用 JavaScript 监听 window.scrollY
Bootstrap 本身不提供滚动响应逻辑，得自己加轻量 JS。关键点不是“怎么加 class”，而是“什么时候加、什么时候删”：
- 别用
scroll事件直接操作 DOM，容易卡顿；改用requestAnimationFrame节流 - 判断阈值建议用
window.scrollY > 10，而不是> 0，避免手指微滑就触发，体验毛刺 - 如果导航栏有阴影（
shadow-sm），记得在缩小状态里也加上，否则视觉跳变明显
最小可行代码：
let lastScroll = 0;
window.addEventListener('scroll', () => {
requestAnimationFrame(() => {
const current = window.scrollY;
const navbar = document.querySelector('.navbar');
if (current > 10 && current > lastScroll) {
navbar.classList.add('smaller', 'shadow-sm');
} else if (current <= 10) {
navbar.classList.remove('smaller', 'shadow-sm');
}
lastScroll = current;
});
});移动端下拉菜单被遮挡？检查 z-index 和父容器 overflow
固定导航栏 + 下拉菜单（.dropdown-menu）在 iOS Safari 或某些 Android 浏览器里常被截断，根本原因不是 z-index 低，而是父级设置了 overflow: hidden 或 transform（比如用了 translateZ(0) 优化动画）。
- 先查
.navbar或其任意祖先是否有overflow: hidden，有就删掉 - 如果用了
position: sticky替代fixed-top，那下拉菜单一定被裁，sticky 不支持脱离文档流的子元素展开 - 真要保
overflow: hidden，只能把.dropdown-menu用position: fixed+ 手动计算坐标强行托出，代价高，慎选
最稳妥的做法：坚持用 fixed-top，且确保导航栏外层无任何 overflow 限制。
真正难的不是加个 class，而是理解 fixed 定位如何与文档流、滚动事件、移动端渲染机制互相影响。一个没注意到的 overflow: hidden 或漏掉的 pt-5，就能让整个悬浮效果失效。
