如何创建 - 粘性/附加导航栏
了解如何使用 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 {
overflow: hidden;
background-color: #333;
}
/* 导航栏链接 */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* 页面内容 */
.content {
padding: 16px;
}
/* 当粘性类到达滚动位置时，用 JS 将其添加到导航栏 */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* 为页面内容添加一些顶部填充以防止突然快速移动（因为导航栏在页面顶部获得新位置（位置:固定和顶部:0）*/
.sticky + .content {
padding-top: 60px;
}
步骤 3) 添加 JavaScript:
实例
// 当用户滚动页面时，执行 myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
var sticky = navbar.offsetTop;
// 当到达滚动位置时，将粘性类添加到导航栏。 离开滚动位置时删除 "sticky"
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
亲自试一试 »
