直接设 background-color: transparent 无效，因 .navbar-light/.navbar-dark 强制设背景色覆盖；.navbar-collapse 无背景致“透底”；应移除预设类，用 .navbar-transparent { background-color: transparent !important; } 并清除 border/shadow。
直接设 background-color: transparent 为什么没反应
因为 Bootstrap 5 的 .navbar 默认不写 background-color，但 .navbar-light 或 .navbar-dark 这类预设类会强行注入 background-color: #fff 或 #343a40，直接覆盖你的 transparent 声明。更常见的是，.navbar-collapse 容器本身没继承背景，也没设背景色，导致折叠菜单展开后“透底”——你以为导航栏透明了，其实是子容器漏出了页面内容。
实操建议：
- 删掉
.navbar-light/.navbar-dark这类带背景绑定的类，只留.navbar和自定义类（如.navbar-transparent） - 用更具体的选择器覆盖：比如
.navbar-transparent { background-color: transparent !important; } - 顺手清掉干扰项：
border: none !important;、box-shadow: none !important;，否则白边或阴影会破坏“真透明”感 - 检查浏览器开发者工具的 Computed 面板，确认
background-color最终值是rgba(0, 0, 0, 0)或transparent，而不是被某条高权重规则覆盖成白色
getBoundingClientRect().top 比 window.scrollY > 100 更靠谱
用固定像素阈值判断滚动（比如 window.scrollY > 100）在真实项目里经常失灵：顶部有 banner、加载动画、或者用了 position: sticky，都会让 scrollY 和导航栏实际贴顶时机错位。用户还没看到导航栏，它就变色了；或者页面已滚动到底，导航栏还僵在透明状态。
实操建议：
- 监听导航栏自身位置：
document.querySelector('nav.navbar').getBoundingClientRect().top - 当该值 ≤ 0，说明导航栏上边缘已贴住视口顶部，此时才触发变色逻辑
- 避免在
scroll回调里直接操作样式，改用classList.toggle('scrolled', top - 加
requestAnimationFrame节流（不是防抖），防止频繁重排影响滚动流畅度
渐变显色必须靠 rgba() + transition，别用 transparent
transparent 和 rgba(255,255,255,0.9) 看似等价，但 CSS transition 对 transparent → rgba() 是无效的。很多教程写 transition: background-color 0.3s，结果滚动时颜色突变——根本没过渡动画。
实操建议：
- 初始状态必须用
background-color: rgba(255, 255, 255, 0)（不是transparent） - 滚动后状态用
background-color: rgba(255, 255, 255, 0.95)或带阴影的box-shadow: 0 2px 10px rgba(0,0,0,0.08) -
transition只写明确属性：transition: background-color 0.3s ease, box-shadow 0.3s ease，别用all - 如果用了
background-image: linear-gradient()，记得加background-image: none !important清掉 Bootstrap 5 默认的浅色渐变图层，否则会叠加出灰蒙蒙的效果
.navbar-collapse 的背景必须单独处理
这是最常被忽略的一环。你给 .navbar 设了透明，JS 也成功切了 .scrolled 类，但移动端点开折叠菜单，下拉区域还是透明的——因为 .navbar-collapse 是独立 DOM 节点，不继承父级背景，也不受 .scrolled 类影响。
实操建议：
- 给
.navbar-collapse显式加背景类，比如bg-white或bg-body（Bootstrap 5.3+ 推荐后者，语义更中性） - 不要依赖 JS 动态增删
.bg-white，那会增加逻辑耦合；直接在 HTML 里写死：<div class="navbar-collapse bg-body"> <li>如果需要滚动后下拉菜单也变深色背景，用 CSS 层级控制：<code>.navbar.scrolled .navbar-collapse { background-color: #fff !important; } - 检查
.dropdown-menu是否被误设为透明——它和.navbar-collapse是两个元素，别把下拉项的白底当成导航栏背景
真正难的不是写对那几行 CSS，而是搞清哪一层 DOM 控制哪一块视觉表现。导航栏看似一个整体，实际是 .navbar、.navbar-collapse、.navbar-nav、甚至 .container 多层叠加的结果。改错一层，整套透明/渐变逻辑就断掉。
