实现平滑过渡的滚动隐藏页眉效果，核心是通过监听页面滚动事件判断滚动方向，结合CSS过渡属性控制页眉的显示与隐藏状态，让页眉的进出动画更加自然流畅，避免生硬的显示切换影响用户体验。
实现原理
整个效果的实现分为三个核心步骤：
- 监听页面的滚动事件，获取当前的滚动位置
- 对比前后两次的滚动位置，判断用户是向上滚动还是向下滚动
- 根据滚动方向切换页眉的状态，通过CSS的transition属性实现平滑过渡动画
基础HTML结构
首先我们需要搭建基础的页面结构，包含固定的页眉和可滚动的内容区域：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑过渡滚动隐藏页眉</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 页眉区域 -->
<header class="header">
<div class="header-content">
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
</div>
</header>
<!-- 内容区域 -->
<main class="main-content">
<p>这里是页面的主要内容，用于填充足够的高度触发滚动效果。</p>
<p>可以重复添加多段内容，让页面出现滚动条。</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
<p>示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
</main>
<script src="script.js"></script>
</body>
</html>
CSS样式设置
接下来设置页眉的基础样式和过渡效果，通过transform属性控制页眉的位置，配合transition实现平滑过渡：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* 页眉基础样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: white;
/* 过渡效果：transform属性变化时有0.3秒的平滑过渡 */
transition: transform 0.3s ease-in-out;
z-index: 1000;
}
/* 页眉隐藏状态：向上移动出可视区域 */
.header.hide {
transform: translateY(-100%);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.header-content h1 {
font-size: 20px;
}
.header-content nav ul {
display: flex;
list-style: none;
gap: 20px;
}
.header-content nav a {
color: white;
text-decoration: none;
font-size: 16px;
}
/* 内容区域样式，添加顶部内边距避免被页眉遮挡 */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 20px;
line-height: 1.8;
}
.main-content p {
margin-bottom: 20px;
font-size: 16px;
}
JavaScript逻辑实现
最后通过JavaScript监听滚动事件，判断滚动方向并切换页眉的状态：
// 获取页眉元素
const header = document.querySelector('.header');
// 记录上一次的滚动位置
let lastScrollTop = 0;
// 滚动阈值，滚动超过这个距离才触发状态切换，避免微小滚动触发
const scrollThreshold = 10;
// 监听页面滚动事件
window.addEventListener('scroll', function() {
// 获取当前滚动位置
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 判断滚动方向：当前位置大于上次位置且超过阈值，说明向下滚动
if (currentScrollTop > lastScrollTop && currentScrollTop > scrollThreshold) {
// 向下滚动，隐藏页眉
header.classList.add('hide');
} else {
// 向上滚动，显示页眉
header.classList.remove('hide');
}
// 更新上一次的滚动位置，取当前位置和0的最大值，避免负数
lastScrollTop = Math.max(currentScrollTop, 0);
});
优化建议
上述基础实现已经可以满足大部分场景的需求，实际使用中还可以做以下优化：
- 使用节流函数优化滚动事件监听，避免频繁触发回调影响性能
- 可以根据页面需求调整过渡的时间和缓动函数，比如使用
ease-out让隐藏动画更快 - 如果需要页眉在页面顶部时始终显示，可以额外判断
currentScrollTop是否为0，为0时强制显示页眉
常见问题
开发者在实现该效果时可能会遇到以下问题：
- 页眉隐藏时出现抖动：通常是过渡属性设置不当，建议只过渡
transform属性，避免过渡top等属性引发重排 - 滚动事件触发过于频繁：可以加入节流逻辑，比如每100毫秒最多执行一次状态判断
- 移动端兼容问题：注意
scrollTop的获取方式，兼容window.pageYOffset和document.documentElement.scrollTop
scroll_hide_headersmooth_transitionJavaScriptCSS_transition修改时间：2026-07-15 15:00:39