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

Posted 欢欢_blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js滚动到指定位置导航栏固定顶部相关的知识,希望对你有一定的参考价值。

<!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>
    <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>
    <script type="text/javascript">
      window.onscroll=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>

 

以上是关于js滚动到指定位置导航栏固定顶部的主要内容,如果未能解决你的问题,请参考以下文章

垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部

滚动时如何使菜单栏固定在顶部

BootStrap有用代码片段(持续总结)

HTML5如何才能让导航栏固定顶部不动,且!且!且!不遮挡住下面的DIV???

滚动时将菜单栏固定在顶部

IOS如何在标题视图中实现视图固定在导航栏位置?