本文介绍使用原生 javascript 实现导航栏在页面滚动超过指定阈值后自动添加/移除样式类，从而切换背景色，无需依赖 jquery，代码更轻量、兼容性更好且符合现代前端开发实践。
本文介绍使用原生 javascript 实现导航栏在页面滚动超过指定阈值后自动添加/移除样式类，从而切换背景色，无需依赖 jquery，代码更轻量、兼容性更好且符合现代前端开发实践。
要让 .navbar 在用户向下滚动页面时动态改变背景色，关键在于监听 scroll 事件，并根据滚动距离实时控制 CSS 类的增删。虽然 jQuery 方案看似直观，但现代浏览器已原生支持高效、简洁的 DOM 操作，推荐使用 vanilla JS 替代。
✅ 推荐实现（原生 JavaScript）
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (navbar) {
navbar.classList.toggle('alt-color', window.scrollY > 10);
}
});
该写法利用 Element.classList.toggle(className, condition) 的双参数形式：当 window.scrollY > 10 为 true 时自动添加 'alt-color'，否则移除，逻辑清晰且无冗余操作。
? 对应 CSS（含必要增强）
.navbar {
transition: background-color 0.2s ease; /* 推荐明确属性而非 all */
background-color: #212121;
height: 100px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar.alt-color {
background-color: #fff;
}
/* 可选：辅助演示长页面 */
body {
margin: 0;
min-height: 120vh;
}
⚠️ 注意事项：
- 确保
- 添加 position: sticky; top: 0 可确保导航栏始终吸附顶部，提升用户体验；
- 使用 window.scrollY（而非 this.scrollY）更语义清晰且避免 this 绑定歧义；
- transition 中建议指定具体属性（如 background-color），避免 all 引发意外动画或性能损耗；
- 若需兼容 IE，classList.toggle(condition) 不被支持，应改用 classList.add() / classList.remove() 判断逻辑。
✅ 补充：防抖优化（高频率滚动场景）
对于长页面或复杂交互，可加入简单节流防止过度触发：
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const navbar = document.querySelector('.navbar');
if (navbar) {
navbar.classList.toggle('alt-color', window.scrollY > 10);
}
ticking = false;
});
ticking = true;
}
});
此方案兼顾性能与响应性，是生产环境中的稳健选择。最终效果：页面初始时深色导航栏，下拉超过 10px 后平滑过渡为浅色背景，提升视觉层次与可用性。
