单纯设 background-color: transparent 无效，因 bootstrap 5 的 .navbar 默认含 background-image 且子元素如 .navbar-collapse 自带背景色；滚动变色必须用 js 切换类名并配合 css 过渡与移动端单独处理。
直接用 css 写 background-color: transparent 不生效，滚动后也变不了色——因为 bootstrap 的导航栏不是单层元素，透明和变色都得靠 js 控制类名切换，再配合精准的 css 覆盖。
为什么单纯设 background-color: transparent 没用
Bootstrap 5 的 .navbar 默认有 background-image: linear-gradient()，会盖住你设的 transparent 或 rgba()；更关键的是，.navbar-collapse、.navbar-nav 这些子容器自带白色背景，它们不继承父级背景，光改 .navbar 根本没用。
- 用浏览器开发者工具点开
.navbar，看 computed styles 里background-image是否为none - 检查
.navbar-collapse是否有background-color，它在移动端展开时是独立区域，必须单独设背景 -
.navbar-light和.navbar-dark只管文字颜色，不控制背景，别指望它们自动带底色
滚动后变色必须用 JS 切换 class，不能靠 CSS 媒体查询或 :hover
CSS 静态规则无法感知滚动位置，所有“初始透明 → 滚动实色”效果都依赖 JavaScript 监听并操作 DOM 类名。常见错误是直接在 scroll 回调里反复写 element.style.backgroundColor = 'xxx'，这会破坏 CSS 过渡且难以维护。
- 定义两个 CSS 类：
.navbar-transparent（含background-color: rgba(255,255,255,0)+background-image: none）和.navbar-scrolled（如background-color: #fff+box-shadow: 0 2px 4px rgba(0,0,0,.1)） - JS 里用
getBoundingClientRect().top ≤ 0判断导航栏是否已贴顶，比硬写window.scrollY > 60更可靠，适配不同设备和首屏 banner - 务必加
transition: background-color 0.3s ease在默认状态（非.navbar-scrolled）上，否则切换生硬
.navbar-collapse 在移动端展开时背景仍是透明？这是最常漏掉的一环
你给 .navbar 加了 .navbar-scrolled，但折叠菜单展开后还是透出底下内容——因为 .navbar-collapse 是个独立 <div>，它不会自动继承 <code>.navbar 的背景色或类名。
- 不要只给
.navbar加bg-white，而要在 HTML 中显式给.navbar-collapse加bg-white或bg-body - 如果用 JS 动态控制背景，记得同步操作：
navbarCollapseEl.classList.toggle('bg-white', scrolled) - 避免用
.bg-transparent，它的优先级太高，会锁死透明状态，导致后续.bg-white切换失败
真正难的不是写几行 JS，而是搞清哪一层在起作用、哪个背景值被谁覆盖、以及移动端展开态是否被单独照顾——这些细节一漏，滚动变色就只在桌面端“看起来正常”。
