应使用 getBoundingClientRect().top ≤ 0（或 ≤ -10 留缓冲）判断导航栏是否滚动出顶；通过 class 切换控制背景，避免直接操作 style；scroll 事件需节流（如 setTimeout 控制 300ms 间隔）并添加 { passive: true } 提升性能。
滚动时如何用原生 JS 判断导航栏是否在顶部
关键不是监听 window.onscroll 然后硬算 scrollTop，而是用 getBoundingClientRect() 获取导航栏自身相对于视口的位置。这样能避免页面缩放、滚动抖动或 fixed 定位导致的判断偏差。
常见错误是直接对比 document.documentElement.scrollTop 和某个固定像素值（比如 50），但一旦导航栏高度动态变化或页面有 sticky header，就会失效。
- 用
const navbar = document.querySelector('.navbar')拿到导航栏元素 - 在 scroll 事件里调用
navbar.getBoundingClientRect().top ，表示已滚动出视口顶部（即已开始遮挡） - 更稳妥的做法是
navbar.getBoundingClientRect().top ，留 10px 缓冲，避免临界点反复触发
如何用 class 切换控制透明/实色背景
Bootstrap 的 .navbar 默认带背景，但透明效果必须靠 CSS class 控制，不能直接操作 style.backgroundColor —— 否则会覆盖 Bootstrap 的响应式背景逻辑（比如深色模式下的自动适配）。
推荐在 HTML 中预先定义两个 class：.navbar-transparent（背景全透明 + 文字高对比度）和 .navbar-scrolled（带背景色 + 可选阴影）。JS 只负责增删 class，样式完全交给 CSS。
-
.navbar-transparent应设background-color: transparent并确保backdrop-filter: blur(10px)（可选） -
.navbar-scrolled建议用rgba(255,255,255,0.95)而非纯白，避免强对比突兀 - 务必给
.navbar加transition: background-color 0.3s ease, box-shadow 0.3s ease，否则变色会“跳”
为什么 scroll 事件里要节流，以及怎么简单实现
原生 scroll 事件每秒可能触发几十次，不节流会导致频繁 DOM 查询和 class 切换，尤其在低端安卓机上明显卡顿。但没必要引入 Lodash 或复杂时间戳逻辑。
一个够用的轻量节流：用 setTimeout + clearTimeout 控制最小触发间隔，300ms 足够平衡灵敏与性能。
- 声明一个
let scrollTimer全局变量 - scroll 回调里先
clearTimeout(scrollTimer)，再scrollTimer = setTimeout(handleScroll, 300) - 把实际判断逻辑（如 getBoundingClientRect、classList.toggle）放在
handleScroll函数里 - 注意：首次进入页面时需手动调用一次
handleScroll，否则初始状态可能不对
移动端 Safari 下透明背景模糊失效怎么办
iOS Safari 对 backdrop-filter 支持有限，尤其在 position: fixed 的 navbar 上常被忽略。这不是 JS 问题，但 JS 切换 class 后若没生效，容易误以为逻辑错了。
真实原因是 Safari 需要同时满足三个条件才启用 backdrop-filter：元素必须有背景（哪怕透明）、父容器不能有 overflow: hidden、且元素本身不能是文档根节点的直接子节点（所以别把 navbar 直接塞在 最外层）。
- 检查 navbar 外层是否有
overflow: hidden的容器，比如某些 Bootstrap layout wrapper - 确保 navbar 有显式
background-color: transparent（不能只靠继承） - 在 iOS 上 fallback 方案：用
@supports (backdrop-filter: blur(1px))写两套样式，不支持时降级为半透明白底
最易被忽略的是：scroll 事件监听器没加 { passive: true }。Safari 和 Chrome 都会因此强制同步执行，拖慢滚动。记得写成 window.addEventListener('scroll', handler, { passive: true })。
