导航栏滚动变色失效因 background-color 过渡链断裂，应设初始 rgba(255,255,255,0) 并用 getBoundingClientRect().top≤0 精准触发 .navbar-scrolled 类切换。
导航栏滚动时透明变色失效？检查
和
是否同时设置
Bootstrap 默认的
在未滚动时是纯白或深色背景，要实现“初始透明 → 滚动后渐变显色”，核心不是加动画，而是靠 JS 监听滚动 + 切换 CSS 类。很多人直接在
上写
并加
，但发现滚动后颜色没变——因为 Bootstrap 5 的
默认用了
，而某些主题 CSS 又强行覆盖了它，导致过渡链断裂。
实操建议：
确保初始状态用
（不是
），否则
对
不生效
定义两个类：
（带半透明白底 + 阴影）和默认无类状态，用 JS 切换
必须写在默认类里，且只写
和
，别加
用
替代
判断是否进入“粘性区域”
很多教程教你在
里读
，然后和某个固定像素值（比如
）比大小。这在单页应用或有顶部 banner 的页面里会错判：用户还没看到导航栏，
就已 >100，导致导航栏提前变色。
更稳的做法是监听导航栏自身位置：
用
获取导航栏上边缘离视口顶部的距离
当该值 ≤ 0（即导航栏已贴顶），再触发变色逻辑
这样不受页面其他滚动干扰，适配 sticky、fixed、甚至
布局
示例片段：
移动端下
和渐变冲突？先关掉
影响
iOS Safari 和部分安卓 WebView 对
+
+
组合极其敏感，常见现象是：滚动瞬间导航栏闪白、渐变卡顿、甚至整个 navbar 跳出视口。根本原因是浏览器把
（哪怕只是
）和
同时启用时，会强制创建新图层，破坏
的定位上下文。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
解决路径很窄，但有效：
删掉所有给
或其父容器加的
属性（包括
、
、
）
如果要用毛玻璃效果，改用
+
，但必须确认父容器没设
在 iOS 上，
必须作用于直接子元素，不能嵌套在 flex / grid 容器里再设
渐变色用
还是
？优先选后者
有人想让导航栏背景从透明渐变成线性渐变（比如
），结果发现
根本不工作——CSS 不支持
的过渡动画，
是图像，不是颜色值。
真正能平滑过渡的只有颜色类属性：
用
到
，过渡自然
如需视觉层次，配合
，它也能
真要渐变纹理，得用伪元素 +
动画，但性能差、兼容性低，不推荐
复杂点在于：不同设备像素比下，
的透明度感知差异大；最保险的是把初始透明度设为
而非
，避免 Safari 渲染异常。
background-colortransition.navbar.navbarbackground-color: rgba(255,255,255,0.9)transition: background-color 0.3s.navbarbackground-color: transparentbackground-color: rgba(255,255,255,0)transparenttransitiontransparent → rgba.navbar-scrolledtransitionbackground-colorbox-shadowallgetBoundingClientRect()scrollTopwindow.onscrollwindow.scrollY100scrollYdocument.querySelector('.navbar').getBoundingClientRect().topposition: stickyconst navbar = document.querySelector('.navbar');
const handleScroll = () => {
if (navbar.getBoundingClientRect().top <= 0) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
};
window.addEventListener('scroll', handleScroll);position: stickytransformstickytransitionbackdrop-filtertransformtranslateZ(0)backdrop-filtersticky.navbartransformscaletranslateZwill-changebackground: rgba(255,255,255,0.85)backdrop-filter: blur(10px)overflow: hiddenposition: stickystickylinear-gradientrgbato bottom, #fff, #f0f0f0transitionbackground-imagelinear-gradientbackground-color: rgba(255,255,255,0.05)rgba(255,255,255,0.95)box-shadow: 0 2px 10px rgba(0,0,0,0.05)transitionopacityrgba0.010