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

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

实现案例

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

css控制样式

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

js监听

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

导入js

 lt;script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"gt;lt;/scriptgt;
 lt;script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.min.js"gt;lt;/scriptgt; 

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!