最稳做法是监听导航栏自身位置，用 getBoundingClientRect().top ≤ 0 判断是否贴顶，不依赖页面其他元素高度，适配所有常见布局；缓存 navbar 元素避免重复查询 DOM。
直接用 window.scrollY 判断滚动距离是最简单的方式，但容易在首屏有 banner、缩放或 sticky 布局下失效；更稳的做法是监听导航栏自身位置——用 getBoundingClientRect().top ≤ 0，它不依赖页面其他元素高度，适配所有常见布局。
用 getBoundingClientRect().top 替代 scrollY 判断是否该变色
滚动阈值写死（比如 window.scrollY > 60）在不同设备、不同首屏内容下表现割裂：手机上一滑就触发，桌面端可能要滚半屏。而导航栏是否“已贴顶”，只跟它自己有关。
- 缓存一次
const navbar = document.querySelector('.navbar')，避免每次滚动都查 DOM - 在
scroll回调里调用navbar.getBoundingClientRect().top ，表示导航栏上边缘已到达或超过视口顶部 - 移动端 Safari 对临界点敏感，建议留缓冲：
top 而非严格=== 0 - 首次加载后手动调用一次判断逻辑，否则刷新页面时状态错乱
transition 必须写在默认规则里，且起始值不能是 transparent
很多人写了 transition: background-color 0.3s 却发现变色是“啪”一下跳过去——因为浏览器无法在 transparent（关键字）和 rgba()（颜色值）之间插值动画。
- 初始状态必须设为
background-color: rgba(255, 255, 255, 0)，不是transparent -
transition: background-color 0.3s ease, box-shadow 0.3s ease要写在.navbar默认选择器中，不是只写在.scrolled类里 - 如果用了
background-image: linear-gradient()（Bootstrap 5 默认有），它会盖住background-color，务必加background-image: none !important - 别写
transition: all 0.3s，它会拖慢不可动画属性（如display）的变更
移动端 .navbar-collapse 背景必须单独控制
给 .navbar 加了 .scrolled 类，但折叠菜单展开后还是透出底下内容——因为 .navbar-collapse 是独立容器，不继承父级背景，也不自动获得你添加的类。
- 不要指望
.navbar-scrolled自动影响.navbar-collapse，必须显式同步操作 - JS 中同时控制两个元素：
navbarCollapseEl.classList.toggle('bg-white', scrolled) - 避免使用
.bg-transparent，它的 CSS 优先级太高，会锁死透明状态，导致后续.bg-white切换失败 - 如果用了
backdrop-filter，记得加-webkit-backdrop-filter兼容 Safari
节流别用 setTimeout，用 requestAnimationFrame 包一层
原生 scroll 事件每秒可能触发几十次，不节流会导致频繁 DOM 查询和 class 切换，在低端安卓机或 iOS Safari 上明显卡顿、闪白。
- 用
requestAnimationFrame是最轻量且流畅的节流方式，确保只在下一帧执行一次判断 - 不要在
scroll回调里反复调用getBoundingClientRect()或querySelector，提前缓存好元素和阈值 - 监听时加
{ passive: true }提升滚动性能：window.addEventListener('scroll', handler, { passive: true }) - 别在
scroll里直接写element.style.backgroundColor，这会覆盖 Bootstrap 的响应式背景逻辑，也破坏过渡效果
真正难的不是写几行 JS，而是把 getBoundingClientRect().top、rgba() 起始值、transition 位置、.navbar-collapse 同步、requestAnimationFrame 节流这五点全部对齐——漏掉任意一个，都会出现“闪一下”“不渐变”“移动端失效”这类看似随机实则可复现的问题。
