本质是监听scroll事件并切换CSS类，Bootstrap本身不自带该功能；需用JS动态增删如.navbar-scrolled类，再由CSS控制背景色、阴影等样式变化，避免直接操作style。
Navbar滚动时背景变不透明，本质是监听scroll事件+切换CSS类
bootstrap本身不自带滚动变色逻辑，它只提供.navbar基础样式和.navbar-light/.navbar-dark配色预设。要实现“初始透明、滚动后变实色”，必须自己加js监听滚动，并动态增删类（比如.scrolled），再用css控制背景。
给Navbar加scroll监听时，别直接操作style.backgroundColor
硬编码修改style.backgroundColor会覆盖Bootstrap的CSS变量（如--bs-navbar-bg），且难以响应深色模式、主题切换。正确做法是通过添加/移除CSS类来触发样式变更：
- 在
<nav class="navbar"></nav>上初始不设背景色，或设为background-color: transparent - 定义一个
.navbar-scrolled类，里面写具体背景色、阴影等，例如：.navbar-scrolled { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); box-shadow: 0 2px 4px rgba(0,0,0,.05); } - JS里只做
navbar.classList.toggle('navbar-scrolled', window.scrollY > 10)，其余全交给CSS
移动端滚动监听要注意body滚动被禁用的情况
某些Bootstrap项目启用了data-bs-spy="scroll"或第三方库（如Bootstrap’s ScrollSpy），可能干扰window.scrollY读取；更常见的是iOS Safari下body不滚动、而是.container或main区域滚动。这时window.scrollY始终为0：
- 优先监听
document.documentElement.scrollTop或document.body.scrollTop（兼容性更好） - 如果Navbar固定在顶部，且页面内容容器有自定义滚动（如
overflow-y: auto），需改监听该容器的scrollTop - 简单验证方式：打开开发者工具，在Console里输入
window.scrollY，滚动页面看是否变化
透明Navbar初始状态下，文字和图标可能看不清
初始background-color: transparent时，若页面顶部有浅色背景图或白底内容，.navbar-light的暗色文字就会失效。这时候不能只调背景，还得同步处理文字颜色：
- 用CSS变量统一控制，比如定义
--bs-navbar-color: #333和--bs-navbar-scrolled-color: #000，并在.navbar-scrolled里覆盖 - 或者直接在JS里同时切换文字类：
navbar.classList.toggle('text-dark', scrolled)和navbar.classList.toggle('text-white', !scrolled) - 注意
.navbar-brand和.nav-link可能需要单独加transition: color .3s避免突变
background-color声明——很多人卡在!important没加对，或者忘了清除浏览器缓存导致新CSS没加载。
