如何使用 Bootstrap 建立一個在滾動時動畫/收縮的導覽列？

使用Bootstrap 在滾動時動畫/收縮導航列

創建滾動時收縮的導航欄是一種流行的設計元素，它透過優化來增強使用者體驗較小螢幕上的空間。以下是如何使用Bootstrap 實現此目的：

Bootstrap 5

Bootstrap 5 引入了Sticky-top 類，它使您能夠創建靜態到固定的導航欄影響。只需將 Sticky-top 新增至導覽列元素，當頁面捲動時，它就會黏在視窗的頂部。

Bootstrap 4

使用位置: Sticky

1. 新增 Sticky-top 類列元素。
2. 定義 CSS 以在導覽列變得黏性時更改其位置、填充和背景。
3. 使用 JavaScript 偵測導覽列何時到達視口頂部並套用黏性類別。

使用 IntersectionObserver API

1. 建立觸發元素來指示導覽列何時應變為黏性。
2. 使用 IntersectionObserver API 來監視此觸發元素。
3. 何時觸發元素變得可見，使用黏性類別應用到導覽列JavaScript。

使用 jQuery

1. 將 JavaScript 事件處理程序附加到視窗的捲動事件。
2. 檢查目前捲動位置並將適當的 CSS 類別應用到navbar.

使用 jQuery的範例

<nav class="navbar navbar-inverse bg-inverse fixed-top">
    <!-- your navbar markup -->
</nav>

<script>
$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('.navbar').addClass('sticky-top');
    } else {
        $('.navbar').removeClass('sticky-top');
    }
});
</script>

附加說明

• Bootstrap 4 停止了affix組件，所以推薦使用上面的方法
• 您可能需要調整CSS 和JavaScript 以適應您的特定設計要求。
• 探索引用的演示和範例以獲得靈感和實施指南。

以上是如何使用 Bootstrap 建立一個在滾動時動畫/收縮的導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！