JS如何实现滚动到指定位置导航栏固定顶部-创新互联

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

目前成都创新互联已为超过千家的企业提供了网站建设、域名、网页空间、网站运营、企业网站设计、安康网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

代码：



  
    
    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如何实现滚动到指定位置导航栏固定顶部”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：JS如何实现滚动到指定位置导航栏固定顶部-创新互联
当前链接：http://lszwz.com/article/ddscss.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

重庆外贸网站建设服务器托管边坡防护网厂家网站设计香港云服务器租用梓潼网站设计化妆品企业网站建设方案品牌网站建设成都服务器运维青羊总部基地

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25