最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享，上代码

 <!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="#">首页</a>

                 <a href="#">首页</a>

                 <a href="#">首页</a>

                 <a href="#">首页</a>

                 <a href="#">首页</a>

                 <a href="#">首页</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 =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';

                 }

             }

         </script>

     </body>

 </html>

js-滚动到指定位置导航栏固定顶部的更多相关文章

  1. 基础业务：滚动到指定位置导航固定（CSS实现）

    最近公司做的业务都是使用Vue.Element写的,涉及到的相应的基础业务像轮播.预加载.懒加载,都是使用 NPM上的工具来实现,原理和基础还是要有的,就来实现几个项目中常用到的业务. 经常见到这样的 ...

  2. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  3. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  4. js 滚动到一定位置导航定位在页面最顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js滚动到指定位置显示或隐藏元素

    $(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...

  6. js 获取滚动位置，滚动到指定位置，平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  7. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  8. 通过scrollTop，使子元素滚动至指定位置

    想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

  9. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

随机推荐

  1. 高阶篇：4.1）QFD质量功能展开-总章

    本章目的:了解QFD概念和作用,为FMEA打下基础. 1.QFD定义 质量功能展开QFD(Quality Function Deployment),是把顾客或市场的要求转化为设计要求.零部件特性.工艺 ...

  2. OPPO R7在哪里打开USB调试模式的详细流程

    在我们使用PC连接安卓手机的时候,如果手机没有开启USB调试模式,PC则没办法成功检测到我们的手机,这时我们需要想办法将手机的USB调试模式打开,如下资料我们介绍OPPO R7如何开启USB调试模式的 ...

  3. Vue.js 项目开发学习路线图

    1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...

  4. LoadRunner性能测试结果分析（转载）

    性能测试的需求指标:本次测试的要求是验证在30分钟内完成2000次用户登录系统,然后进行考勤业务,最后退出,在业务操作过程中页面的响应时间不超过3秒,并且服务器的CPU使用率.内存使用率分别不超过75 ...

  5. centos安装postgresql-rpm

    rpm -ivh pgdg-centos93-9.3-3.noarch.rpm确认,回车,

  6. Java - 自定义异常（尚学堂第六章异常机制作业判断三角形）

    写一个方法void isTriangle(int a,int b,int c),判断三个参数是否能构成一个三角形, 如果不能则抛出异常IllegalArgumentException,显示异常信息 “ ...

  7. vue element 常见问题

    1. vue2.0 给data对象新增属性,并触发视图更新  $set this.$set(this.ossData, "signature", 222) // 正确用法 // 数 ...

  8. OS 管理命令

    查看当前目录下最大的文件 du -amx |sort -nr|more ################################################################ ...

  9. Eclipse for J2EE+tomcat配置上的一些问题

    之前下载了一个eclipse基础版本,学习之前没有什么感觉不方便的地方,方式学习到web编程时,就出现问题了,因为不支持创建web项目. 于是下载了一个Eclipse for J2EE版本的工具,但是 ...

  10. 使用kerl安装erlang遇到的问题及解决办法-bak

    1 需要安装相关包 -dev autoconf 2 出现下面错误 * documentation : * xsltproc is missing. * fop is missing. * xmllin ...