应使用classlist.toggle()切换预设css类并由transition控制渐变，初始和目标background-color须统一用rgba()格式，transition声明必须写在默认.navbar规则中，滚动阈值推荐用getboundingclientrect().top≤1判断以适配各种布局与safari。
直接用 classList.toggle() 切换预设 CSS 类，配合 transition 控制背景色渐变，别在 scroll 回调里反复写 element.style.backgroundColor——后者会破坏过渡、难维护，且在 Safari 下常闪白。
为什么 background-color 过渡不生效
常见原因是起始值用了 transparent，而结束值是 rgba() 或十六进制色——浏览器无法在关键字和颜色值之间插值。必须统一用 rgba()：
- 初始状态设为
background-color: rgba(255, 255, 255, 0) - 滚动后切到
background-color: rgba(255, 255, 255, 0.95) -
transition: background-color 0.3s ease必须写在默认的.navbar规则里，不能只写在.scrolled类中 - 如果用了
box-shadow，也得把它加进transition列表，否则阴影出现突兀 - 别写
transition: all 0.3s——它会拖慢不可动画属性（如display）的变更
滚动阈值该用 scrollY 还是 getBoundingClientRect().top
用 window.scrollY > 50 看似简单，但一旦页面有首屏大图、响应式 padding 变化或 sticky fallback，这个固定值就失效。更稳的是监听导航栏自身位置：
- 取
document.querySelector('.navbar').getBoundingClientRect().top - 当它 ≤ 1（不是严格等于 0，留缓冲防 Safari 临界点抖动）时触发变色
- 这样不受页面其他元素高度影响，适配
position: sticky和fixed-top - 首次加载后需手动调用一次判断逻辑，否则首页刷新后可能状态错乱
- 别在滚动回调里反复调用
getBoundingClientRect()——提前缓存元素引用，只在requestAnimationFrame里读一次
移动端 .navbar-collapse 背景为啥还是透明
因为 .navbar-collapse 是独立容器，不会继承 .navbar 的背景色或类名。你在 .navbar 上加了 .scrolled，但折叠菜单展开后仍透出底下内容。
- 必须单独给
.navbar-collapse设置背景：比如.scrolled .navbar-collapse { background-color: rgba(255, 255, 255, 0.95); } - 如果用了
backdrop-filter，也要同步加到.navbar-collapse上 - 确保
.navbar-collapse的z-index足够高，否则下拉项可能被遮挡 - 深色模式下（
data-bs-theme="dark"），记得为.scrolled .navbar-collapse单独定义深色背景值，比如rgba(33, 37, 41, 0.95)
最易被忽略的是：所有 transition 必须写在基础样式里，且 .navbar-collapse 的背景控制完全独立于 .navbar；滚动监听逻辑一旦写死像素阈值，后续改 padding 或字体大小就会让变色时机错位。
