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://hxwzsj.com/article/psosdg.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 营销型网站建设 成都网站设计 四川成都网站制作 手机网站设计 网站建设方案 古蔺网站建设 成都商城网站建设 网站制作 成都网站建设流程 成都网站制作 成都网站建设 自适应网站建设 定制网站设计 成都网站设计 成都网站建设 成都网站建设 移动手机网站制作 手机网站制作 营销型网站建设 网站建设方案 成都网站建设公司 成都网站制作