bootstrap-监听滚动实现头部跟随滚动
2016-09-08 00:04
295 查看
实现案例
css控制样式
js监听
导入js
<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 3 navrbar实现置顶并滚动监听
- bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
- 57-003-1 bootstrap附加导航Affix实现页面的滚动监听
- AppbarLayout实现基本的头部跟随列表滚动效果
- BootStrap下拉菜单和滚动监听插件实现代码
- bootstrap 3 navrbar实现置顶并滚动监听
- jQuery实现浮动层跟随页面滚动效果
- android TextView实现实现跑马灯效果,并监听滚动完成动作。
- Android中实现ScrollView的滚动事件监听
- Android - 小功能 - 对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果
- bootstrap滚动监听
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- Bootstrap3.0学习第二十轮(JavaScript插件——滚动监听)
- jQuery实现div浮动层跟随页面滚动效果
- jQuery实现div浮动层跟随页面滚动效果
- Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果
- headerView跟随 cell一起滚动 及headerView 作为表头背景的实现
- jquery实现滚动条下拉DIV固定在头部不动
- Android 对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果