<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js滚动到指定位置导航栏固定顶部</title>
<styletype="text/css">
body{height:2500px;margin:0;padding:0;}
.banner{height:250px;width:100%;background:#e5e5e5;}
.bignav{width:100%;background:#000;}
.nav{background:#000;width:1200px;margin:0auto;height:45px;}
.nava{display:block;width:200px;float:left;color:#fff;text-decoration:none;text-align:center;line-height:45px;}
</style>
</head>
<body>
<divclass="banner">
</div>
<divclass="bignav"id="bignav">
<divclass="nav">
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>
</div>
</div>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<p>其他内容</p>
<scripttype="text/javascript">
window.onscroll=function(){
vartopScroll=document.body.scrollTop;//滚动的距离,距离顶部的距离
varbignav=document.getElementById("bignav");//获取到导航栏id
if(topScroll>250){//当滚动距离大于250px时执行下面的东西
bignav.style.position='fixed';
bignav.style.top='0';
bignav.style.zIndex='9999';
}else{//当滚动距离小于250的时候执行下面的内容,也就是让导航栏恢复原状
bignav.style.position='static';
}
}
</script>
</body>
</html>
|