本文介绍如何通过原生 JavaScript 监听页面滚动事件，为导航栏（.navbar）动态添加/移除 alt-color 类以实现背景色变化，替代过时的 jQuery 方案，并确保样式平滑过渡与定位正确。
本文介绍如何通过原生 javascript 监听页面滚动事件，为导航栏（`.navbar`）动态添加/移除 `alt-color` 类以实现背景色变化，替代过时的 jquery 方案，并确保样式平滑过渡与定位正确。
要让导航栏在用户向下滚动页面时自动改变背景色（例如从深色变为浅色），关键在于：精准监听滚动位置、高效操作 DOM 类名、并配合恰当的 CSS 定位与过渡效果。以下是一个简洁、可靠且现代的实现方案。
✅ 推荐方案：原生 JavaScript + classList.toggle()
相比 jQuery，现代浏览器原生支持的 window.addEventListener('scroll', ...) 更轻量、性能更好，且无需额外依赖：
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (navbar) {
navbar.classList.toggle('alt-color', window.scrollY > 10);
}
});? classList.toggle(className, condition) 是核心技巧：当 condition 为 true 时添加类，为 false 时自动移除，逻辑更清晰、无冗余判断。
? 必备 CSS 支持
仅靠 JS 不足以实现理想效果，还需以下 CSS 配合：
立即学习“Java免费学习笔记（深入）”；
.navbar {
transition: background-color 0.2s linear;
background-color: #212121;
height: 100px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar.alt-color {
background-color: #fff;
}
/* 可选：增强视觉反馈 */
.navbar.alt-color {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}⚠️ 关键注意点：
- position: sticky; top: 0; 确保导航栏始终吸附在视口顶部（否则滚动检测可能失效或行为异常）；
- transition 应明确指定属性（如 background-color），避免使用 all 导致意外动画（如 box-shadow 或 transform 的过渡干扰）；
- .navbar 选择器需与 HTML 中实际 class 名完全一致（示例中 <nav class="navbar"> 正确，若写成 <nav class="nav"> 则 JS 查询失败）；
- 建议添加 z-index 防止被其他元素遮挡。
? 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
transition: background-color 0.2s linear;
background-color: #212121;
color: white;
height: 100px;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.navbar.alt-color {
background-color: #fff;
color: #333;
}
body { min-height: 120vh; margin: 0; }
</style>
</head>
<body>
<nav class="navbar">My Navigation</nav>
<div style="height: 200vh; padding: 2rem;">Scroll down to see the effect ↓</div>
<script>
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (navbar) {
navbar.classList.toggle('alt-color', window.scrollY > 10);
}
});
</script>
</body>
</html>? 常见问题排查
- 不生效？ 检查控制台是否有 Uncaught TypeError: Cannot read property 'classList' of null — 说明 document.querySelector('.navbar') 未找到元素，请确认 class 名拼写及 script 执行时机（建议放在 </body> 前或使用 DOMContentLoaded 包裹）；
- 闪烁或卡顿？ 避免在 scroll 回调中执行复杂计算；classList.toggle 已足够高效，无需节流（throttle）——现代浏览器对简单类操作优化良好；
- 移动端失效？ 确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在，且无 overflow: hidden 阻止滚动。
掌握这一模式后，你还能轻松扩展功能：比如根据滚动距离渐变背景、联动 logo 缩放、或触发其他 UI 状态切换。简洁、标准、可持续 —— 这正是现代前端实践的核心。
