JS如何实现滚动到指定位置导航栏固定顶部

小编给大家分享一下JS如何实现滚动到指定位置导航栏固定顶部,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司公司2013年成立,先为陵水黎族等服务建站,陵水黎族等地企业,进行企业商务咨询服务。为陵水黎族企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

代码:



  
    
    js滚动到指定位置导航栏固定顶部
    
       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;}
    
  
  
    
    
                    首页         首页         首页         首页         首页         首页       
    
    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

    

其他内容

           window.onscroll=function(){         var topScroll =document.body.scrollTop;//滚动的距离,距离顶部的距离         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';         }       }        

以上是“JS如何实现滚动到指定位置导航栏固定顶部”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页名称:JS如何实现滚动到指定位置导航栏固定顶部
本文URL:http://bzwzjz.com/article/psosdg.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站建设开发 教育网站设计方案 网站建设公司 网站设计 成都网站设计 网站设计制作报价 营销型网站建设 攀枝花网站设计 高端网站设计 成都网站建设 自适应网站建设 成都网站设计 外贸网站设计方案 网站建设费用 成都定制网站建设 成都网站制作 成都网站建设 响应式网站设计方案 重庆手机网站建设 重庆网站制作 网站建设推广 手机网站制作