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

 <!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. css样式之标签的查找

    css的组成部分:选择器和声明 css的注释: /*这是注释*/ <!DOCTYPE html> <html lang="zh-CN"> <head& ...

  2. Angular material mat-icon 资源参考_Images

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  3. 洛谷 P2053 [SCOI2007]修车（最小费用最大流）

    题解 最小费用最大流 n和m是反着的 首先, \[ ans = \sum{cost[i][j]}*k \] 其中,\(k\)为它在当前技术人员那里,排倒数第\(k\)个修 我们可以对于每个技术人员进行 ...

  4. mysql里面 limit的奇效

    项目里面有遇到一个需求,查询一个表,先group by ,再按group 的count(*)进行倒序,取出每个group里面发表时间最新的一个纪录,之前的同事SQL是这样写的 SELECT * FRO ...

  5. TestGc finalize()

    package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...

  6. this小结

    this 对象是在运行时基于函数的执行环境绑定的: 全局函数中, this 等于 window 函数被作为某个对象的方法调用时, this 等于那个对象 匿名函数的执行环境具有全局性, this 指向 ...

  7. Mac系统下Eclipse代码联想功能（代码助手，代码提示）快捷键

    Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改一.每次输入都自动提示点击Eclipse,使其成为第一响应者,preferences->Java->Editor-& ...

  8. spring cloud知识点

    eureka注册中心(zookeeper,eureka) 也要集群,可以相互注册,网状结构.后面很多高可用的服务都是用这种方式.Eureka的客户端缓存技术 spring boot actuator ...

  9. 关于display:none;和id特性的一些需要注意的地方

    关注点一: display:none;一旦用于某个元素,那个这个元素在页面中就不再占据位置. visibility:hidden;用于某个元素时,这个元素还会占据位置. 关注点二: 即使使用了disp ...

  10. Cucumber capybara 每个Scenario登陆一次

    hook.rb中添加: After do |scenario| Capybara.current_session.instance_variable_set(:@touched, false)end ...