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

 <!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. 0、PlayGround可视化

    Tensorflow新手通过PlayGround可视化初识神经网络 是不是觉得神经网络不够形象,概念不够清晰,如果你是新手,来玩玩PlayGround就知道,大神请绕道. PlayGround是一个在 ...

  2. centOS7虚拟机设置固定IP

      说明:想要达到的如下效果, 1.笔记本主机IP为设置自动获取,不管什么情况下,不受虚拟机影响,只要连接外网就可以正常上网: 2.只要笔记本主机可以正常访问外网,启动虚拟机中的CentOS 7系统就 ...

  3. pydicom读取dicom文件报错

    之前采用pydicom读取dicom文件一切都很正常,不过最近读取一批数据的时候,会报错 读取代码 file = pydicom.read_file(filepath) data = file.pix ...

  4. Luogu P1886 滑动窗口

    P1886 滑动窗口 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The a ...

  5. C# 进程通信SendMessage和有关消息参数

    SendMessage是啥? 函数原型: LRESULT SendMessage(HWND hWnd,UINT Msg,WPARAM wParam,LPARAM IParam)SendMessage( ...

  6. 让windows登陆界面显示administrator账户

    如果windowsXP只有一个administrator账户,在开机登陆windows的欢迎界面,会出现这个账户名,点击,输入密码就可登陆到windows桌面: 如果新建了另一个管理员账户,在欢迎界面 ...

  7. Kubernetes Running Locally

    1. Requirements 1) Linux Not running Linux? Consider running Minikube, or on a cloud provider like G ...

  8. Robot Framework（AutoItLibrary库关键字介绍）

    AutoItLibrary库关键字 AutoItLibrary 的对象操作大体上有几大主要部分,Window 操作.Control 操作.Mouse 操作.Process操作.Run 操作.Reg 操 ...

  9. 加载 Firefox 配置

    有小伙伴在用脚本启动浏览器时候发现原来下载的插件不见了,无法用 firebug在打开的页面上继续定位页面元素,调试起来不方便 .加载浏览器配置,需要用 FirefoxProfile(profile_d ...

  10. 【CSS】 布局之剖析负边距

    我们都知道,一个元素框的大小是由元素内容+内边距+边框+外边距来决定的. 关于内边距padding,内边距呈现了元素的背景,其设置值是不可以为负的. 而对于外边距margin,默认为透明,设置值可以为 ...