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

 <!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. 手把手教你在CentOS 7.4下搭建Zabbix监控(转)

    Linux系统版本:CentOS 7.4 1.安装前需要先关闭selinux和firewall. 1.1 [root@zabbix ~]# vi /etc/selinux/config 将SELINU ...

  2. [BZOJ4204] 取球游戏（期望）

    DarkBZOJ4204 (题面来源) [题目描述] 有\(m\)个球,一开始每个球均有一个初始标号,标号范围为\(1-n\)且为整数,标号为\(i\)的球有\(a_{i}\)个,并保证\(Σa_{i ...

  3. BT网站-IBMID.COM

    最近把網站改版了,主要是更改了搜索引擎. 大家可以訪問 什么是磁力链接(IBMID.COM)(Magnet URI)? 简单的说:类似下面这样以“magnet:?”开头的字符串,就是一条“磁力链接” ...

  4. Codeforces - 24D 有后效性的DP处理

    题意:在n*m的网格中,某个物体初始置于点(x,y),每一步行动都会等概率地停留在原地/往左/往右/往下走,求走到最后一行的的步数的数学期望,其中n,m<1000 lyd告诉我们这种题目要倒推处 ...

  5. Maven 整合 robot framework 进行测试

    1. 在maven pom.xml中先配置robot framework的plugin: <plugin> <!-- integration test runner (robot-f ...

  6. Java 抽象类的简单使用

    自己做的一点笔记... 抽象类:使用关键词 abstract 进行修饰,抽象类不能生成对象(实例化),且含有抽象方法(使用 abstract 进行声明,并且没有方法体). 特点: 1️⃣  抽象类不一 ...

  7. GPRS的短信和打电话功能

    短信功能: 发短信设置文本格式就可以了:但收短信可能收到的是乱码,需要编写解码程序才可以: 关于打电话单片机复位功能: 首先要建立黑白名单制度过滤手机号,只运行白名单的手机对的单片机打电话:其它的不响 ...

  8. LinuxShell脚本编程基础2-变量与数值运算、父shell和子shell

    1.变量和数值运算 Shell脚本的变量不需要声明的 对变量赋值有两种方式, 直接用“=” 或者用键盘输入值 #!/bin/bash name1="Jack" echo $name ...

  9. django notes 一：开篇

    公司 web 框架用的是 django, 以前没用过,打算这两周好好看看. 边学习边整理一下笔记,加深理解. 好像谁说过初学者更适合写入门级的教程,我觉得有一定道理. 高手写的教程有一定深度,不会写入 ...

  10. 使用jsp完成商品列表的动态显示

    1数据库准备工作 1创建数据库 2 创建product表 代码如下: CREATE TABLE `product` ( `pid` ) NOT NULL, `pname` ) DEFAULT NULL ...