导航栏滚动时背景平滑渐变可通过CSS transition与JavaScript实现：1. HTML构建导航结构；2. CSS设置透明背景及过渡动画；3. 定义.scrolled类设置滚动后背景色；4. JS监听滚动事件，滚动超50px添加类，否则移除；5. 建议过渡时间0.3s～0.5s，可加box-shadow增强层次。
当用户滚动页面时，让导航栏背景颜色平滑渐变，是一种提升用户体验的常见设计手法。通过 CSS 的 transition 与 JavaScript 监听滚动事件，可以轻松实现导航栏从透明到实色的过渡效果。
1. 基础结构：HTML 导航栏
先构建一个简单的导航栏结构：
2. 初始样式：透明背景 + 过渡动画
设置导航栏默认为半透明或完全透明，并添加 background-color 的过渡效果：
立即学习“前端免费学习笔记（深入）”；
.navbar {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
height: 60px;
background-color: transparent; /* 初始透明 */
transition: background-color 0.4s ease; /* 关键：添加过渡 */
z-index: 1000;
}
注意：transition 属性让 background-color 变化更柔和。使用 ease 或 linear 控制动效节奏。
3. 滚动后样式：添加背景色类
定义一个 CSS 类，用于表示滚动一定距离后的导航栏状态：
.navbar.scrolled {
background-color: rgba(0, 0, 0, 0.8); /* 半透明黑底 */
backdrop-filter: blur(5px); /* 可选：增加毛玻璃效果 */
}
使用 rgba() 而非纯色，可以让背景更具层次感，同时保持内容可读性。
4. JavaScript：监听滚动并切换类名
通过 JS 检测页面是否已滚动，动态添加或移除类：
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
当滚动超过 50px 时，添加 scrolled 类，触发 background-color 从透明向深色过渡；滚动回顶部则恢复透明。
5. 完整效果与优化建议
- 过渡时间建议控制在 0.3s～0.5s，太长会显得迟钝，太短则不明显。
- 可配合 box-shadow 一起过渡，增强视觉层次。
- 移动端注意性能，避免频繁重绘，transform 和 opacity 更高效，但此处 background-color 已足够流畅。
基本上就这些。利用 CSS transition 结合滚动事件，就能实现自然的导航栏背景渐变效果，既美观又不复杂。
