快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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如何实现滚动到指定位置导航栏固定顶部
路径分享:http://6mz.cn/article/psosdg.html

其他资讯