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