如何创建 - 向下滑动滚动条
了解如何使用 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: -50px;
/* 将导航栏隐藏在顶视图之外 50 px */
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:
实例
// 当用户从文档顶部向下滚动 20px 时，向下滑动导航栏
// 当用户滚动到页面顶部时，向上滑动导航栏（距离顶部视图 50px）
window.onscroll = function() {scrollFunction()};
function
scrollFunction() {
if (document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}
亲自试一试 »
