bootstrap監聽滾動實現頭部跟隨滾動-PHP开发-PHP中文網

bootstrap監聽滾動實現頭部跟隨滾動

高洛峰

發布： 2016-12-07 13:53:40

原創

1462 人瀏覽過

本文實例為大家分享了bootstrap監聽滾動頭部跟隨滾動的實作方法，供大家參考，具體內容如下

實現案例

<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<div id=&#39;menu_wrap&#39;>
 <div class=&#39;menu&#39;>
  <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控制樣式

導入js

.menu{
 width:100%;
 z-index:99;
}
.menuFixed{
 position:fixed;
 top:0;
 left:0;
}
#menu_wrap{
 height:50px;
 width:100%;
}

登入後複製

知識只有共享才能傳播，基本上都是從一個文字上上網了一下資料然後記錄下來，也有些是原滋原味搬了過來，也有時加了一些自己的想法，希望可以幫助到大家。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

bootstrap監聽滾動實現頭部跟隨滾動