滚动监听导航条

滚动监听导航条

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

• 首先，我们先创建一个带有导航条页面，效果如下图
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxxFq3yC-1575894664643)(https://img-blog.csdn.net/20180108152815415?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzUxMDQ1ODY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

• html代码

	
	


	

		
This is a navbar.
	
	

		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
		
添加一下内容
	

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做出更多好看的导航条。