bootstrap监听滚动实现头部跟随滚动


Posted in Javascript onNovember 08, 2016

本文实例为大家分享了bootstrap监听滚动头部跟随滚动的实现方法,供大家参考,具体内容如下

实现案例

<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id='menu_wrap'> 
 <div class='menu'> 
  <nav class="navbar navbar-default" role="navigation"> 
  <div class="container"> 
  <div class="navbar-header"> 
  <a class="navbar-brand" href="#" style="font-weight:bold">植被数据录入</a> 
  </div> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <!-- <button type="button" class="close" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">×</span></button> -->
   <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button>
   <button type="button" class="btn btn-primary" style="float: right;margin-right: 10px;margin-top: 5px;" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">取消</span></button>
  </div> 
 </div> 
 </nav> 
 </div> 
</div>
</body>

css控制样式

.menu{ 
 width:100%; 
 z-index:99; 
}
.menuFixed{ 
 position:fixed; 
 top:0; 
 left:0; 
} 
#menu_wrap{ 
 height:50px; 
 width:100%; 
}

js监听

<script> 
 $(window).scroll(function () { 
  var menu_top = $('#menu_wrap').offset().top; 
  if ($(window).scrollTop() >= menu_top) { 
  $('.menu').addClass('menuFixed') 
  } 
  else { 
  $('.menu').removeClass('menuFixed') 
  } 
 }); 
 </script>

导入js

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
 <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

知识只有共享才能传播,才能推崇出新的知识,才能学到更多,这里写的每一篇文字/博客,基本都是从网上查询了一下资料然后记录下来,也有些是原滋原味搬了过来,也有时加了一些自己的想法,希望可以帮助到大家。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 #Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
You might like
PHP实现的简单异常处理类示例
2017/05/04 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
js模块加载方式浅析
2017/08/12 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
小加工厂管理制度
2014/01/21 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
影视后期实训报告
2014/11/05 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
监护人证明
2015/06/19 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle