滚动监听导航条

今天想做一个可以随着页面滚动随时动态跟进的导航条

首先，我们先创建一个带有导航条页面，效果如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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做出更多好看的导航条。

滚动监听导航条

滚动监听导航条

猜你喜欢