应使用getBoundingClientRect().top ≤ 0动态判断导航栏是否贴顶，而非固定scrollY > 50；背景色过渡需统一用rgba()并声明transition: background-color，同时清除background-image和子元素背景干扰。
直接用 window.scrollY 判断滚动距离是最简单有效的做法，但阈值必须结合导航栏实际高度设，否则容易误触或延迟响应。
为什么 scrollY > 50 这种写法经常失效
很多教程硬写 scrollY > 100 当触发条件，结果在移动端或有 banner 的页面里，导航栏还没完全贴顶就变色了。根本原因是没考虑导航栏自身高度和页面初始布局偏移。
- 先用
document.querySelector('.navbar').offsetHeight获取真实高度（别信 CSS 里写的 height） - 阈值建议设为
offsetHeight * 1.2左右，比如 navbar 高 64px，就用 76 作阈值 - 如果页面顶部有 sticky header 或 banner，要把它们的高度也加进去，否则会提前触发
background-color 从 transparent 切到 rgba() 为啥没过渡效果
因为 transparent 和 rgba() 在浏览器渲染管线里属于不同颜色模型，transition 对它们之间的切换不生效。
- 初始状态必须写成
background-color: rgba(255, 255, 255, 0)，不是transparent - 滚动后切到
rgba(255, 255, 255, 0.85)，alpha 值别拉满，0.95 以上视觉上就接近实色了 - CSS 里必须显式声明
transition: background-color 0.3s ease，不能只写transition: all - 记得清除 Bootstrap 默认的
background-image: linear-gradient()，加background-image: none !important
移动端 Safari 滚动时 navbar 闪白或卡顿怎么办
这是 backdrop-filter + scroll + transform 共同触发的图层分裂问题，iOS Safari 特别敏感。
- 删掉所有可能触发新图层的样式：比如
transform: translateZ(0)、will-change: transform -
backdrop-filter必须配-webkit-backdrop-filter，且 blur 值别超过 12px - scroll 回调里别直接读
getBoundingClientRect()，缓存 navbar 元素引用，用requestAnimationFrame包一层 - 给
window.addEventListener('scroll', handler, { passive: true })加{ passive: true }，避免被浏览器强制降级
最易被忽略的是子元素背景覆盖——.navbar-collapse 和 .navbar-nav 默认带白色背景，哪怕父级透明了，它们也会把底色“撑”出来，得单独清掉。
