<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1"> <div> <div> <nav role="navigation"> <div> <div> <a href="#">植被数据录入</a> </div> <div> <!-- <button type="button" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">×</span></button> --> <button type="button" data-dismiss="modal" data-target="#mychart2-zb"><span aria-hidden="true">保存</span></button> <button type="button" 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="https://www.jb51.net/bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料然后记录下来，也有些是原滋原味搬了过来，也有时加了一些自己的想法，希望可以帮助到大家。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程