如何在滾動時設定動畫或縮小 Bootstrap 導覽列？

如何使用Bootstrap 在捲動時設定動畫或縮小導覽列

搜尋在捲動時設定動畫或導覽列的解決方案通常縮小導覽列的解決方案通常會導致過時的信息，尤其是與Bootstrap 3 有關的信息。本文重點介紹 Bootstrap 的當前解決方案4 和 5。

Bootstrap 5

Bootstrap 5 保留了 Sticky-top 類，用於在捲動時建立靜態到固定的導覽列效果。或者，您可以利用 JavaScript IntersectionObserver 來監視「觸發器」元素，並在觸發器可見時將 CSS 類別套用到導覽列。然後，此類別可以包含必要的 CSS 來調整導覽列的外觀和位置。

Bootstrap 4

由於 Bootstrap 4 缺少 Affix 元件，因此您可以使用 Sticky-頂級類，用於在導覽列到達頂部時附加導覽列。但是，僅此方法不會觸發 JavaScript 事件來指示何時新增導覽列。因此，一旦導覽列變得黏性，您將需要 JavaScript 來操縱導覽列的樣式。 IntersectionObserver 是一個合適的選項，用於偵測導覽列上方的觸發元素何時到達視窗並觸發「黏性」狀態。

jQuery 替代方案

除了使用Bootstrap 的內建-在功能上，您還可以使用ScrollPos-Styler 等jQuery 外掛程式或編寫自己的jQuery 腳本來控制滾動導覽列的樣式。一種方法是使用 data-toggle="affix" 定義固定頂部導覽欄，並使用 jQuery 觀察滾動位置並有條件地切換 .affix 類別。

其他資源

• [黏性頂部導覽列- IntersectionObserver示範](https://codepen.io/pdreier/pen/QWNYrrZ)
• [黏性頂部導覽列- jQuery示範](https://codeply.com/go/62Roy6RDOa)
• [更多Bootstrap 4 更改捲動導覽列樣式範例](https://wrapbootstrap.com/theme/change-navbar-style- on-scroll-bootstrap-147)

以上是如何在滾動時設定動畫或縮小 Bootstrap 導覽列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！