带平滑过渡效果的滚动隐藏/显示头部导航栏是网页交互中非常实用的功能，核心是通过监听页面滚动行为，判断滚动方向后控制导航栏的显示与隐藏，同时配合CSS过渡实现平滑的动画效果，避免出现突兀的切换感受。
实现原理
整个功能的实现分为三个核心部分：
- 监听页面的滚动事件，记录当前的滚动位置，和之前的滚动位置对比判断滚动方向
- 根据滚动方向修改导航栏的显示状态，通常通过添加或移除对应的CSS类实现
- 使用CSS的
transition属性或者animation属性为导航栏的显示隐藏添加平滑过渡效果
基础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" id="header">
<div class="nav-content">
<div class="logo">我的网站</div>
<nav class="nav-list">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<!-- 页面内容区域 -->
<main class="main-content">
<section class="content-block">
<h2>内容区块一</h2>
<p>这里是页面的内容部分，用于填充足够的高度触发滚动效果。</p>
<p>可以添加更多文本内容，让页面出现垂直滚动条。</p>
</section>
<section class="content-block">
<h2>内容区块二</h2>
<p>继续添加内容，保证页面有足够的滚动空间。</p>
</section>
<section class="content-block">
<h2>内容区块三</h2>
<p>更多内容填充，确保滚动效果可以正常触发。</p>
</section>
<section class="content-block">
<h2>内容区块四</h2>
<p>最后一段内容，让页面滚动长度足够。</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS样式与过渡效果
接下来编写CSS样式，定义导航栏的基础样式、隐藏状态样式，以及过渡动画效果：
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
/* 头部导航栏样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: #fff;
/* 定义过渡效果：transform属性变化持续0.3秒，使用缓动函数 */
transition: transform 0.3s ease-in-out;
z-index: 1000;
}
/* 导航栏隐藏状态：向上移动自身高度，完全移出视口 */
.header.hide {
transform: translateY(-100%);
}
/* 导航内容布局 */
.nav-content {
max-width: 1200px;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
font-size: 20px;
font-weight: bold;
}
.nav-list ul {
display: flex;
list-style: none;
}
.nav-list li {
margin-left: 30px;
}
.nav-list a {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.nav-list a:hover {
color: #3498db;
}
/* 页面内容区域样式 */
.main-content {
margin-top: 60px;
padding: 20px;
}
.content-block {
max-width: 1200px;
margin: 0 auto 40px;
padding: 30px;
background-color: #f5f5f5;
border-radius: 8px;
}
.content-block h2 {
margin-bottom: 15px;
color: #2c3e50;
}
.content-block p {
margin-bottom: 10px;
color: #666;
}
JavaScript滚动逻辑实现
最后编写JavaScript代码，监听滚动事件判断滚动方向，控制导航栏的显示和隐藏：
// 获取导航栏元素
const header = document.getElementById('header');
// 记录上一次的滚动位置，初始值为0
let lastScrollTop = 0;
// 设置滚动阈值，避免小幅度滚动触发切换
const scrollThreshold = 10;
// 监听页面滚动事件
window.addEventListener('scroll', function() {
// 获取当前滚动位置
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 判断滚动方向：当前滚动位置大于上次，且超过阈值，说明向下滚动
if (currentScrollTop > lastScrollTop && currentScrollTop > scrollThreshold) {
// 向下滚动，添加hide类隐藏导航栏
header.classList.add('hide');
} else {
// 向上滚动，移除hide类显示导航栏
header.classList.remove('hide');
}
// 更新上一次的滚动位置，注意兼容处理
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
});
优化与注意事项
在实际使用中，可以对基础实现做以下优化：
- 滚动事件触发频率很高，可以使用节流函数限制事件处理函数的执行频率，减少性能消耗
- 如果导航栏有背景透明度的变化需求，可以在CSS中同时添加
opacity属性的过渡效果 - 移动端触摸滚动的场景下，需要确保滚动事件的监听兼容移动端的滚动行为
- 如果页面初始加载时就在底部，需要初始化
lastScrollTop的值避免初始状态错误
节流优化后的滚动监听代码
以下是添加了节流处理的滚动监听代码，提升性能：
const header = document.getElementById('header');
let lastScrollTop = 0;
const scrollThreshold = 10;
// 节流时间间隔，单位毫秒
const throttleDelay = 100;
let isThrottled = false;
window.addEventListener('scroll', function() {
if (isThrottled) {
return;
}
isThrottled = true;
setTimeout(function() {
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollTop > lastScrollTop && currentScrollTop > scrollThreshold) {
header.classList.add('hide');
} else {
header.classList.remove('hide');
}
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
isThrottled = false;
}, throttleDelay);
});
scroll_eventheader_navtransitioncss_animation修改时间：2026-06-24 10:33:29