Bootstrap 5 导航栏透明需同时清除 background-image、设 rgba() 背景色、移除边框，并单独处理下拉菜单背景与文字色；过渡动画须统一用 rgba() 起始值且声明在默认状态。
直接设 background-color: transparent 基本无效——Bootstrap 5 默认叠加了 background-image、border-bottom 和主题类，三者共同覆盖你的透明声明。
为什么 background-color: rgba() 没反应
Bootstrap 5 的 .navbar 根元素默认不写 background-color，但 .navbar-light 类会注入 background-color: #fff；更隐蔽的是它自带一层浅色渐变：background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0))。这个图层叠在你设的 rgba() 上，导致看起来发灰、半透不透。
- 必须同时清除：
background-image: none !important - 显式覆盖背景色：
background-color: rgba(255, 255, 255, 0.05) !important（别用transparent，过渡会失效） - 删掉干扰边框：
border-bottom: none !important - 别用
background: rgba()简写——它会意外清空background-position或其他隐含值
子容器（如 .navbar-collapse、.dropdown-menu）也得单独处理
.dropdown-menu 是独立 DOM 节点，完全不继承 .navbar 的背景设置。哪怕导航栏已透明，下拉菜单仍默认白底黑字，尤其在移动端展开时，页面内容会从菜单底下“透上来”，造成视觉混乱。
- 加专属规则：
.navbar .dropdown-menu { background-color: rgba(255, 255, 255, 0.95) !important; border: none !important; box-shadow: none !important; } - 文字颜色不能依赖继承，需单独重设：
.navbar-light .dropdown-item { color: #212529; } - 避免只写
background-color: transparent——它可能被 Bootstrap 高权重规则覆盖，rgba()+!important更稳
transition 写了却没动画？检查起始值和声明位置
很多人写了 transition: background-color 0.3s 却发现颜色是“啪”一下跳过去，根本没过渡。问题不在 JS，而在 CSS 声明本身。
- 起始状态不能用
transparent——浏览器无法对transparent和rgba()插值，必须统一用rgba(255, 255, 255, 0) -
transition必须写在默认状态（即未滚动时）的规则里，而不是只写在.scrolled类中 - 别写
transition: all 0.3s——它会强行动画height、opacity等无关属性，拖慢渲染
滚动监听要用 getBoundingClientRect().top，不是固定像素阈值
用 window.scrollY > 100 判断容易出错：一旦页面有 banner、缩放或 sticky header，临界点就偏移。更稳的做法是看导航栏自身是否已贴顶。
- 取元素：
const navbar = document.querySelector('.navbar') - 在 scroll 回调里判断：
navbar.getBoundingClientRect().top （表示已开始遮挡视口顶部） - 加 10px 缓冲更稳妥：
navbar.getBoundingClientRect().top ，避免临界点反复触发 - 务必用
requestAnimationFrame节流，否则低端安卓机上明显卡顿
最易被忽略的一点：透明状态下若要加毛玻璃效果（backdrop-filter: blur(10px)），必须确保 background-color 是 transparent 或极低 alpha 的 rgba()，否则模糊对象是导航栏自身背景，不是背后的内容。
