本文介绍如何通过原生 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 时自动移除，逻辑更清晰、无冗余判断。
Java Maven Common下载Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
? 必备 CSS 支持
仅靠 JS 不足以实现理想效果，还需以下 CSS 配合：
.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 名完全一致（示例中
- 建议添加 z-index 防止被其他元素遮挡。
? 完整可运行示例
<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><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>
? 常见问题排查
- 不生效？ 检查控制台是否有 Uncaught TypeError: Cannot read property 'classList' of null — 说明 document.querySelector('.navbar') 未找到元素，请确认 class 名拼写及 script 执行时机（建议放在
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
