📅  最后修改于: 2023-12-03 15:25:12.829000             🧑  作者: Mango
这是一个用于网页开发的导航栏固定顶部引导程序,可以让网站导航栏在页面滚动时保持固定在页面顶端,使用户在浏览网站时更加方便快捷。
本程序使用CSS的定位和层叠属性实现导航栏的固定顶部效果,通过JavaScript监听并响应用户滚动操作,判断用户滚动距离是否超过导航栏所在的位置,来动态修改导航栏的样式。
<link rel="stylesheet" href="fixed-navbar.css">
fixed-navbar
类<nav class="fixed-navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script src="fixed-navbar.js"></script>
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
}
.fixed-navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.fixed-navbar li {
margin-right: 20px;
}
.fixed-navbar li:last-child {
margin-right: 0;
}
.fixed-navbar a {
color: #fff;
text-decoration: none;
font-size: 16px;
}
.fixed-navbar a:hover {
color: #f00;
}
window.addEventListener("scroll", function() {
var navbar = document.querySelector(".fixed-navbar");
var offset = navbar.offsetHeight;
if (window.pageYOffset >= offset) {
navbar.classList.add("fixed-navbar-scroll");
} else {
navbar.classList.remove("fixed-navbar-scroll");
}
});