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

2019-11-19 19:01:00

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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实战教程

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

上一篇：BootStrap table使用方法分析

下一篇：AngularJS学习笔记（三）数据双向绑定的简单实例