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

 <!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. Spark 错误日志中看到的一些问题

    2014-4-23 18:42:09 org.jivesoftware.spark.util.log.Log error 严重: Unable to contact shared group info ...

  2. 前端之JS的线程(最易懂)

    1. 前言 很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象.还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解. 我们都知道J ...

  3. try语句块和异常处理

    在C++中,异常处理包括: · throw表达式(throw expression) 异常检测部分使用throw表达式来表示它遇到了无法处理的问题.throw表达式抛出一个异常并把控制权转移到能处理该 ...

  4. 123th LeetCode Weekly Contest Add to Array-Form of Integer

    For a non-negative integer X, the array-form of X is an array of its digits in left to right order.  ...

  5. [转] Linux中的默认权限与隐藏权限（文件、目录）

    [From] https://blog.csdn.net/davidsky11/article/details/25424615 一个文件(或目录)拥有若干个属性,包括(r/w/x)等基本属性,以及是 ...

  6. CentOS7 firewalld打开关闭防火墙 开放端口

    firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status fir ...

  7. rocketmq的消息过滤-sql方式

    通常我们会使用Tag过滤 特殊情况下我们也可以使用userproperties+TAGS过滤 , sql92定义 这两种都是在服务器端完成过滤, 对于超大数据量的场景(1小时4000W+)不要在客流端 ...

  8. Linux 用Kazam 录有声音的视频

    1.相关链接 https://launchpad.net/kazam 2.特性 录制视频的格式 : webm(vp8),mp4(h264),avi(raw),avi(huffyuv),avi(loss ...

  9. Win32创建异形窗口

    大家都见过在windows下各种气泡窗口.输入法窗口以及其他一些窗口,这些窗口看起来不像传统的windows窗那样,上面是标题栏,下面是窗口的客户区.这些窗口形状各异,可以是一个多边形,一幅图,甚至是 ...

  10. RabbitMQ---初识

    1.概述 1.1 RabbitMQ   是  实现了   高级消息队列协议(AMQP) 的开源   消息代理软件,也称为  面向消息的中间件: AMQP:Advanced Message Queuin ...