js滚动到指定位置导航栏固定顶部

最新推荐文章于 2023-05-15 16:30:14 发布

weixin_30897079

最新推荐文章于 2023-05-15 16:30:14 发布

阅读量222

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gxywb/p/10830691.html

版权

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>js滚动到指定位置导航栏固定顶部</title>
 <style type="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: 0 auto; height: 45px;}
 .nav a{display: block; width: 200px;float: left; color: #fff; text-decoration: none; text-align: center; line-height: 45px;}
 </style>
</head>
<body>
 <div class="banner">
 </div>
 <div class="bignav" id="bignav">
 <div class="nav">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
 </div>
 </div>
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 其他内容
 <script type="text/javascript">
 window.οnscrοll=function(){
 var topScroll = get_scrollTop_of_body();//滚动的距离,距离顶部的距离
 var bignav = 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';
 }
 }
 /*解决浏览器兼容问题*/
 function get_scrollTop_of_body(){
 var scrollTop;
 if(typeof window.pageYOffset != 'undefined'){//pageYOffset指的是滚动条顶部到网页顶部的距离
 scrollTop = window.pageYOffset;
 }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
 scrollTop = document.documentElement.scrollTop;
 }else if(typeof document.body != 'undefined'){
 scrollTop = document.body.scrollTop;
 }
 return scrollTop;
 }

 </script>
</body>
</html>