使用 position: sticky 实现固定导航栏，通过 JavaScript 监听 scroll 事件，当页面滚动距离大于 0 时为导航栏添加 scrolled 类，结合 CSS 过渡效果动态显示 box-shadow，提升视觉层次与用户体验。
实现一个带有滚动效果的导航栏（Sticky Header）并控制 box-shadow 的显示，是前端开发中常见的需求。这种效果能让导航在页面滚动时始终可见，并在用户向下滚动时添加阴影以增强层次感。下面介绍如何使用纯 HTML 和 CSS 实现这一效果。
1. 固定导航栏：Sticky Header 的实现
要让导航栏在滚动时固定在顶部，可以使用 position: sticky。这个属性结合了相对定位和固定定位的特点，非常适用于导航栏。
关键点：
- 给导航元素设置
position: sticky - 必须指定
top值（通常为 0）才能生效 - 父容器不能有
overflow: hidden等限制
立即学习“前端免费学习笔记（深入）”；
<header class="navbar">
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
立即学习“前端免费学习笔记（深入）”；
.navbar {
position: sticky;
top: 0;
background-color: white;
z-index: 1000;
padding: 1rem 0;
transition: box-shadow 0.3s ease;
}
2. 滚动时添加 box-shadow 阴影效果
CSS 本身无法直接检测“是否已滚动”，但可以通过 JavaScript 动态添加类来控制样式变化。当页面滚动一定距离后，给导航栏添加阴影。
实现思路：
- 监听 window 的 scroll 事件
- 判断当前滚动位置（scrollTop）是否大于 0
- 根据条件为导航栏添加或移除一个类（如
scrolled）
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
对应的 CSS 样式：
.navbar {
/* 原始样式 */
position: sticky;
top: 0;
background-color: white;
z-index: 1000;
padding: 1rem 0;
transition: box-shadow 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0); /* 初始无阴影 */
}
<p>.navbar.scrolled {
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /<em> 滚动后显示阴影 </em>/
}</p>3. 优化体验：平滑过渡与性能考虑
为了让视觉效果更自然，建议为 box-shadow 添加过渡动画。同时避免频繁触发 scroll 事件，可做简单节流处理。
- 使用
transition让阴影渐变出现 - 对 scroll 事件进行防抖或限制触发频率
- 确保导航层级高于其他内容（
z-index设置合理）
立即学习“前端免费学习笔记（深入）”；
/* 平滑过渡 */
.navbar {
transition: box-shadow 0.3s ease;
}
如果希望更简洁，也可以用 CSS-only 方案模拟类似效果（例如利用伪元素和透明度变化），但精确控制仍需 JavaScript。
基本上就这些。Sticky 导航加滚动阴影，核心就是 position: sticky + JavaScript 监听滚动 + 动态类控制 box-shadow。不复杂但容易忽略细节。
