如何 - 滚动时隐藏菜单
了解如何使用 CSS 和 JavaScript 在向下滚动时隐藏导航菜单。
如何在向下滚动时隐藏导航栏
步骤 1) 添加 HTML
创建导航栏
示例
<div id="navbar">
<a href="#home">首页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
</div>
步骤 2) 添加 CSS
样式导航栏
示例
#navbar {
background-color: #333; /* 黑色背景颜色 */
position: fixed; /* 使其固定/固定 */
top: 0; /* 停留在顶部 */
width: 100%; /* 全宽 */
transition: top 0.3s; /* 向下滑动（和向上）时的过渡效果 */
}
/* 样式导航栏链接 */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
步骤 3) 添加 JavaScript
示例
/* 当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏 */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
自己尝试 »
