bootstrap监听滚动实现头部跟随滚动
本文实例为大家分享了bootstrap监听滚动头部跟随滚动的实现方法，供大家参考，具体内容如下
实现案例
<bodydata-spy="scroll"data-target="#bs-example-navbar-collapse-1"> <divid='menu_wrap'> <divclass='menu'> <navclass="navbarnavbar-default"role="navigation"> <divclass="container"> <divclass="navbar-header"> <aclass="navbar-brand"href="#"style="font-weight:bold">植被数据录入</a> </div> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <!--<buttontype="button"class="close"data-dismiss="modal"data-target="#mychart2-zb"><spanaria-hidden="true">×</span></button>--> <buttontype="button"class="btnbtn-primary"style="float:right;margin-right:10px;margin-top:5px;"data-dismiss="modal"data-target="#mychart2-zb"><spanaria-hidden="true">保存</span></button> <buttontype="button"class="btnbtn-primary"style="float:right;margin-right:10px;margin-top:5px;"data-dismiss="modal"data-target="#mychart2-zb"><spanaria-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(){
varmenu_top=$('#menu_wrap').offset().top;
if($(window).scrollTop()>=menu_top){
$('.menu').addClass('menuFixed')
}
else{
$('.menu').removeClass('menuFixed')
}
});
</script>
导入js
<scripttype="text/javascript"src="../bower_components/jquery/dist/jquery.min.js"></script> <scripttype="text/javascript"src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料然后记录下来，也有些是原滋原味搬了过来，也有时加了一些自己的想法，希望可以帮助到大家。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。