滚动监听导航条
今天想做一个可以随着页面滚动随时动态跟进的导航条
-
首先,我们先创建一个带有导航条页面,效果如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxxFq3yC-1575894664643)(https://img-blog.csdn.net/20180108152815415?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzUxMDQ1ODY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)] -
html代码
<!DOCTYPE html>
<html>
<head>
<title>滚动监听的导航条</title>
<style type="text/css">
#navbar{
margin: 50px auto;
background-color: #009966;
border-radius: 5px;
width: 80%;
text-align: center;
line-height: 120px;
}
#navbar p{
margin: 10px 0px;
color: white;
font-family: fantasy;
font-size: 100px;
text-shadow: 5px 5px 5px black;
}
#navbar p:hover{
text-shadow: 5px 5px 5px grey;
}
a{
text-decoration: none;
}
div{
margin: 0px auto;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<nav id="navbar">
<a href="#"><p>This is a navbar.</p></a>
</nav>
<div>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
<h1>添加一下内容</h1>
</div>
</body>
</html>
window.onload = function () {//页面加载
var navbar = document.getElementById("navbar");//得到navbar导航条元素
window.onscroll = function () {//页面滚动就调用函数setTop(navbar)
setTop(navbar);
}
}
function setTop(navbar){
var navbarTop = navbar.offsetTop;//导航条的顶部位置
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//页面滚动的顶部位置
navbar.style.position = "relative";//将导航条设置为相对定位,设置距离顶部的位置就可以用与初始位置的相对距离计算了
navbar.style.top = scrollTop + 30 + "px";
}
如果想使导航条运动具有美感,可以对其transition过渡属性进行更多设置,例如:
#navbar{
margin: 50px auto;
background-color: #009966;
border-radius: 5px;
width: 80%;
text-align: center;
line-height: 120px;
transition: top 1s;//如果距离顶部发生变化需要1s过渡
}
当然你可以使用css样式配合js做出更多好看的导航条。