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 相关文章推荐
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
在js中修改html body的样式
Nov 11 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery.each使用详解
2015/07/07 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
static关键字的用法
2013/10/07 面试题
什么是会话Bean
2015/05/14 面试题
村长反四风问题个人对照检查材料
2014/09/21 职场文书
入股协议书范本
2014/11/01 职场文书
2014年医务科工作总结
2014/12/18 职场文书
西游降魔篇观后感
2015/06/15 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript