JS滚动到指定位置导航栏固定顶部


Posted in Javascript onJuly 03, 2017

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

<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</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滚动到指定位置导航栏固定顶部,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
npm 语义版本控制详解
Sep 10 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
mac上node.js环境的安装测试
Jul 03 #Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 #Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 #Javascript
vue.js学习之UI组件开发教程
Jul 03 #Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 #Javascript
Vue.js实例方法之生命周期详解
Jul 03 #Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
img标签中onerror用法
2009/08/13 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
详解vue路由
2020/08/05 Javascript
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
文职个人求职信范文
2013/09/23 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
警示教育活动总结
2014/05/05 职场文书
职工食堂管理制度
2015/08/06 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL