纯CSS无法实现滚动渐变背景，必须用JS监听滚动并切换预设的rgba()背景类，配合transition实现平滑过渡。
滚动时渐变背景无法动态变化？纯 CSS 不行，必须 JS 切类
Bootstrap 5 的 bg-gradient-* 类是静态的，它不感知滚动，也不会随 window.scrollY 自动调整透明度或颜色强度。所谓“跟随滚动响应”，本质是用 JS 监听滚动位置，再切换预设的、不同 alpha 值的 rgba() 背景类——不是实时计算渐变值，而是离散状态切换。
- 别写
background: linear-gradient(...)并试图在 scroll 回调里改角度或色值——浏览器不支持渐变插值，只会跳变 - 正确路径：定义多个渐变类（如
.bg-scroll-0、.bg-scroll-50、.bg-scroll-100），每个类对应一组background-color: rgba(...) - JS 只负责读
window.scrollY或navbar.getBoundingClientRect().top，然后element.classList.replace()切换类名 - 所有过渡效果必须由 CSS 的
transition: background-color 0.3s ease承担，且该声明要写在基础类（非仅.scrolled）上
为什么 background-image: linear-gradient() 在滚动中失效
当你给导航栏加了 background-image: linear-gradient(135deg, #fff, #000)，再用 JS 改 element.style.backgroundImage，会发现过渡生硬甚至卡顿。这是因为：
-
background-image属性不可动画，CSStransition对它完全无效 - Bootstrap 5 的
.navbar默认用background-color控制底色，background-image会叠加其上；若没显式设background-color: transparent，渐变会被遮住 - 移动端 Safari 对频繁更新
background-image极其敏感，易触发重绘卡顿或闪白 - 真正可平滑过渡的只有
background-color（前提是统一用rgba()格式）
如何用 rgba() 实现滚动渐变的最小可行方案
核心是两段代码：一段 CSS 定义渐变层级，一段 JS 控制类切换。不要试图“实时生成渐变”，而应预设关键帧。
- CSS 中写：
.navbar { background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease; } .navbar.scrolled-50 { background-color: rgba(255, 255, 255, 0.5); } .navbar.scrolled-100 { background-color: rgba(255, 255, 255, 0.95); } - JS 中用
requestAnimationFrame节流，根据scrollY计算百分比并取整：const navbar = document.querySelector('.navbar'); function updateBg() { const ratio = Math.min(window.scrollY / 200, 1); // 0~1 const level = Math.round(ratio * 100); navbar.className = navbar.className.replace(/scrolled-\d+/g, ''); if (level > 0) navbar.classList.add(`scrolled-${level}`); } window.addEventListener('scroll', () => requestAnimationFrame(updateBg)); - 注意：小屏下若用深色主题，需单独定义
.navbar[data-bs-theme="dark"] .scrolled-50等规则，避免白底透出
移动端滚动阈值不准？别信 scrollY > 50 这种硬编码
固定像素阈值在不同设备、不同首屏高度下极易失效。比如 iPad Pro 页面首屏高 1000px，scrollY > 50 时用户还没看到导航栏；而折叠屏手机首屏仅 600px，scrollY > 50 可能刚加载完就触发。
- 更稳的做法是监听导航栏自身位置：
navbar.getBoundingClientRect().top 表示已贴顶（留 1px 缓冲防 Safari 临界抖动） - 首次加载后立即执行一次判断：
updateBg();，否则刷新页面可能状态错乱 - 如果导航栏用了
position: sticky，iOS Safari 会因 transform 干扰导致getBoundingClientRect()返回异常值，此时应回退到window.scrollY > 0并加{ passive: true }提升滚动流畅度 - 别在 scroll 回调里反复调用
getBoundingClientRect()——缓存引用，只在requestAnimationFrame里读一次
滚动渐变最难的不是 JS 逻辑，而是确保所有状态下的 background-color 都用 rgba() 统一格式，且 transition 声明在基础选择器里。漏掉任意一环，都会导致第一次切换无动画、Safari 下闪白、或深色模式下背景消失。
