本文實(shí)例為大家分享了bootstrap監(jiān)聽(tīng)滾動(dòng)頭部跟隨滾動(dòng)的實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)案例
<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">植被數(shù)據(jù)錄入</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監(jiān)聽(tīng)
<script> $(window).scroll(function () { var menu_top = $('#menu_wrap').offset().top; if ($(window).scrollTop() >= menu_top) { $('.menu').addClass('menuFixed') } else { $('.menu').removeClass('menuFixed') } }); </script>導(dǎo)入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>
知識(shí)只有共享才能傳播，才能推崇出新的知識(shí)，才能學(xué)到更多，這里寫的每一篇文字/博客，基本都是從網(wǎng)上查詢了一下資料然后記錄下來(lái)，也有些是原滋原味搬了過(guò)來(lái)，也有時(shí)加了一些自己的想法，希望可以幫助到大家。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
