CSS导航滚动效果实现｜Stickyheader与阴影技巧

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS导航滚动效果实现方法｜Sticky header与阴影控制技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用 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。不复杂但容易忽略细节。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。