如何使用 Bootstrap 3.0 建立黏性導覽列？

使用 Bootstrap 建立黏性導覽列

當網站載入時，使用者通常會喜歡導覽列總是顯示在頁面頂部。當使用者向下捲動時，導覽列應向上捲動並最終固定在螢幕頂部。本指南示範如何使用 Bootstrap 3.0 來實現此目的。

使用JQuery 和JavaScript 的解決方案：

<div> <br>放置您想要的內容想要這裡<br> <p>只要調整javascript大小以符合此視窗</p>
</div><p></p><pre class="brush:php;toolbar:false"><ul>

html, 身體 {<br> 高度: 4000px;</p>}<p><br>.navbar - 修正了{<br> 上：0;<br> z 索引： 100;<br> 位置：固定；<br> 寬度：100%；</p> >}<h1></h1>body_div {<p><br>頂部：0；<br> 位置：相對；<br> 高度: 200px;<br>背景顏色:綠色;</p>}<h1></h1>橫幅{<p><br>寬度：100%；<br>高度：273px;<br>背景顏色：灰色；<br>溢出：隱藏； </p>}<h1></h1>nav_bar {<p><br>邊框： 0;<br>背景顏色:#202020;<br>邊框半徑:0px;<br>邊距底部:0;<br>高:30px;</p>}<p>}<br><br>//下面的css 用於鏈接，粘性導航不需要<br>.nav_links {</p> 邊距：0;<p>}<br><br>.nav_links li {<br> 顯示：內聯塊；</p> 邊距頂部：4px;<p>}<br><br><br> .nav_links li a {<br> 填充：0 15.5px;<br>顏色：#3498db;</p>文字裝飾：無;<p>}<br>

$(document).ready(function () { <br> //更改下面的整數以符合上部div 的高度，我稱之為<br> //橫幅。只需在最後一個數字上加1 即可。滾動位置。 {<br></p><pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});

});

此解決方案使用JavaScript 根據滾動位置在導航欄中新增和刪除navbar-fixed-top 類。導覽列固定的確切滾動位置可以透過更改 JavaScript 程式碼中的值來調整。

以上是如何使用 Bootstrap 3.0 建立黏性導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！