如何实现页面滚动时淡入显示的网站Header？

1. HTML 结构 #

先搭建基础的Header结构，可根据需求添加logo、导航等内容：

<header class="site-header">
  <div class="header-content">
    <a href="#" class="logo">我的网站</a>
    <nav class="nav-menu">
      <a href="#home">首页</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
  </div>
</header>

<!-- 示例滚动内容，用来测试效果 -->
<main class="page-content">
  <section style="height: 120vh;">向下滚动查看Header效果</section>
  <section style="height: 120vh;">继续滚动测试</section>
</main>

2. CSS 样式 #

默认让Header隐藏（不可见且无法点击），添加过渡动画实现淡入效果；再定义一个激活类用来显示Header：

/* Header基础样式 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1rem 2rem;
  /* 默认隐藏状态 */
  opacity: 0;
  visibility: hidden;
  /* 淡入淡出过渡动画 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu a {
  margin-left: 2rem;
  text-decoration: none;
  color: #333333;
}

/* Header显示状态的类 */
.site-header.active {
  opacity: 1;
  visibility: visible;
}

/* 避免页面内容被固定Header遮挡 */
.page-content {
  padding-top: 6rem;
}

3. JavaScript 逻辑 #

监听页面滚动事件，通过对比前后滚动位置判断滚动方向，控制Header的显示/隐藏：

// 记录上一次的滚动位置
let lastScrollTop = 0;
// 滚动触发阈值，避免小幅度滚动误触发
const scrollThreshold = 50;
const header = document.querySelector('.site-header');

window.addEventListener('scroll', () => {
  // 获取当前滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 判断滚动方向与距离
  if (scrollTop > lastScrollTop && scrollTop > scrollThreshold) {
    // 向下滚动且超过阈值，显示Header
    header.classList.add('active');
  } else if (scrollTop < scrollThreshold) {
    // 滚动到顶部附近，隐藏Header
    header.classList.remove('active');
  }

  // 更新上一次滚动位置
  lastScrollTop = scrollTop;
});

额外说明 #

• 用visibility: hidden而非display: none，是因为过渡动画对display属性无效
• 滚动阈值scrollThreshold可根据需求调整，比如改成30px或80px
• 如果想要Header在向上滚动时也保持显示，删除else if的判断逻辑即可

内容的提问来源于stack exchange，提问作者Samir