快捷導(dǎo)航

bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng)

更新時(shí)間：2016年11月08日 11:14:07 作者：y酒味i

這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽滾動(dòng)實(shí)現(xiàn)頭部跟隨滾動(dòng),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了bootstrap監(jiān)聽滾動(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">&times;</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)聽

 <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)上查詢了一下資料然后記錄下來，也有些是原滋原味搬了過來，也有時(shí)加了一些自己的想法，希望可以幫助到大家。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: