关键是监听页面垂直滚动距离，当window.scrolly > 0时为导航栏添加.scrolled类，再通过css中rgba()配合transition实现背景从透明到实色的平滑渐变。
滚动时导航栏背景变色的判断依据是什么
关键不是“滚动了多少”，而是页面是否已离开顶部——即 window.scrollY 是否大于 0。Bootstrap 默认的 .navbar 在未滚动时通常透明或浅色，滚动后需添加类（如 .scrolled）触发背景色变化，纯 CSS 无法监听滚动，必须配合少量 JS。
用 scroll 事件监听并切换 CSS 类
监听 window 的 scroll 事件，在回调中检查 window.scrollY，动态给 .navbar 添加或移除类：
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
- 不要用
scrollTop或pageYOffset替代scrollY，后者更语义清晰且兼容性足够（IE9+） - 避免在滚动事件里直接操作
style.backgroundColor，否则会覆盖 Bootstrap 的响应式背景类（如.bg-light） - 建议节流（throttle），但简单站点可暂不加；若加，用
requestAnimationFrame比setTimeout更稳妥
.scrolled 类的 CSS 写法要注意什么
Bootstrap 5 的 .navbar 默认使用 background-color: transparent（尤其 .navbar-light），所以 .scrolled 必须覆盖它，并注意层级和过渡效果：
.navbar.scrolled {
background-color: #fff !important;
box-shadow: 0 2px 4px rgba(0,0,0,.08);
transition: background-color .3s ease, box-shadow .3s ease;
}
- 必须用
!important覆盖 Bootstrap 的内联或高优先级样式（尤其是.bg-*类） - 别只改
background-color，加box-shadow才有“浮起”感，否则视觉突兀 - 过渡动画写在
.navbar原选择器上，而不是.scrolled里，否则首次加载无渐变 - 移动端需额外测试：iOS Safari 中
position: sticky导航栏滚动时可能触发两次 scroll 事件
如何兼容 Bootstrap 的响应式折叠菜单
折叠菜单（.navbar-collapse）展开时，若页面已滚动，.scrolled 类仍应生效；但某些主题会在折叠态下强制背景透明——这时要确保 CSS 选择器足够具体：
.navbar.scrolled .navbar-collapse,
.navbar.scrolled {
background-color: #fff !important;
}
- 不要只写
.scrolled，否则折叠菜单内部元素可能没被覆盖 - 如果用了
.navbar-dark，则.scrolled应设深色背景（如#212529）并调整文字颜色 - Bootstrap 5.3+ 的
data-bs-theme="dark"属性会影响默认色值，需对应调整.scrolled的配色
实际生效依赖 DOM 加载时机——JS 必须等 .navbar 元素存在后再绑定事件，否则 querySelector 返回 null。这点容易漏，尤其用模块化打包时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
