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 相关文章推荐
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
详解Vue项目中实现锚点定位
Apr 24 Javascript
微信小程序实现授权登录
May 15 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
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开发GUI
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php内存缓存实现方法
2015/01/24 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
应届毕业生求职信
2013/11/30 职场文书
安全教育感言
2014/03/04 职场文书
硕士生找工作求职信
2014/07/05 职场文书
服务整改报告
2014/11/06 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
安全生产先进个人总结
2015/02/15 职场文书
学生逃课检讨书
2015/02/17 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Vue全局事件总线你了解吗
2022/02/24 Vue.js