如何创建 - 隐藏滚动菜单
了解如何使用 CSS 和 JavaScript 在向下滚动时隐藏导航菜单。
如何在向下滚动时隐藏导航栏
步骤 1) 添加 HTML:
创建导航栏:
实例
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">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;
}
亲自试一试 »
