判断导航条是否过顶应监听 scroll 事件，用 getBoundingClientRect().top 动态获取其距视口顶部距离，结合 requestAnimationFrame 优化性能；iOS Safari 中 sticky 导航条需加容差判断 top ≤ 1。
滚动时如何用 scroll 事件判断导航条是否过顶
关键不是监听任意滚动，而是检测页面顶部距视口的距离是否小于导航条高度。直接读 window.scrollY 最可靠，比 document.documentElement.scrollTop 兼容性更好，也避开 IE 的怪异模式问题。
常见错误是用 offsetTop 硬编码导航条位置——一旦页面结构变化（比如加了 banner 或 margin），逻辑就崩了。正确做法是用 getBoundingClientRect() 动态获取导航条顶部坐标：
scroll
- 用
!important覆盖 Bootstrap 的默认background: none和color: inherit - 确保
.nav-link在.scrolled下也有对应颜色规则，否则悬停时仍显示原色 - 移动端折叠菜单的 toggle 按钮（
.navbar-toggler）也要单独处理颜色，否则在白色背景上消失
为什么 requestAnimationFrame 包裹 scroll 处理函数很重要
滚动事件高频触发（每秒几十次），不节流会导致 CPU 占用飙升，尤其在低端设备上卡顿明显。用 setTimeout 或 debounce 会引入延迟，造成“滚动到底部才变色”的滞后感。
requestAnimationFrame 是最优解：它把判断逻辑塞进浏览器下一帧绘制前，既保证响应及时，又天然限频到 60fps。
let ticking = false;
const updateNavbar = () => {
const { top } = navbar.getBoundingClientRect();
navbar.classList.toggle('scrolled', top {
if (!ticking) {
requestAnimationFrame(updateNavbar);
ticking = true;
}
};
这个模式比纯 scroll + setTimeout 更顺滑，且无需额外依赖库。
移动端 Safari 中 position: sticky 导航条滚动变色失效怎么办
如果导航条用了 .navbar-sticky-top，iOS Safari 可能不触发 scroll 事件（因为 sticky 元素自身不滚动，而是容器滚动）。此时 getBoundingClientRect().top 依然有效，但要注意：Safari 对 position: sticky 元素的 top 计算有时返回小数，建议加容差判断：
scroll-behavior: smooth
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
