要创建一个吸顶导航栏，并在用户向下滚动页面时隐藏导航栏，可以使用最近小编美化网站，挺喜欢顶部导航菜单下拉隐藏，上拉再显示的功能，下面小编讲解下具体怎么操作HTML、CSS和JavaScript实现以下效果。
演示图片
HTML 结构
创建一个包含导航栏的 HTML 结构：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>吸顶导航栏</title>
</head>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏样式 */
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
overflow: hidden;
color: #fff;
display: flex;
justify-content: space-around;
padding: 1rem 0;
/*transition: top 0.3s;*/
transition: top 0.5s;
z-index: 10;
}
.navbar a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.navbar a:hover {
background-color: #575757;
}
/* 内容样式 */
.content {
padding-top: 60px;
text-align: center;
}
</style>
<body>
<!-- 导航栏 -->
<div class="navbar" id="navbar">
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#services">服务</a>
<a href="#contact">联系我们</a>
</div>
<!-- 内容 -->
<div class="content">
<h1>欢迎光临</h1>
<p>滚动页面查看导航栏的隐藏效果。</p>
<!-- 内容区模拟长页面 -->
<div style="height: 2000px;"></div>
</div>
<script>
// 获取导航栏元素
const navbar = document.getElementById("navbar");
let prevScrollpos = window.pageYOffset; // 初始滚动位置
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
// 用户向上滚动，显示导航栏
navbar.style.top = "0";
} else {
// 用户向下滚动，隐藏导航栏
navbar.style.top = "-69px"; // 隐藏到页面上方
}
// 更新前一滚动位置
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>JavaScript 实现隐藏效果 (script.js)
这样，当用户向下滚动页面时，导航栏会自动隐藏，向上滚动时重新显示。
文章标题：前端开发教程：顶部导航栏下拉滚动隐藏菜单实现
更新时间：
文章链接：https://www.sokb.cn/soyi-4241.html
文章版权：易搜资源网所发布的内容，部分为原创文章，转载注明来源，网络转载文章如有侵权请联系我们！
更新时间：
2025年02月12日 17时08分12秒文章链接：https://www.sokb.cn/soyi-4241.html
文章版权：易搜资源网所发布的内容，部分为原创文章，转载注明来源，网络转载文章如有侵权请联系我们！
赞 (1)
