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

使用 Bootstrap 動畫/縮小滾動導覽列

控制滾動導覽列的行為可以大大增強網站上的使用者體驗。 Bootstrap 使用各種方法為此提供了解決方案。

Bootstrap 5：

Bootstrap 5 引入了 Sticky-top 類，它提供了與之前的 Affix 組件類似的效果。它將滾動時的導覽列固定在頁面頂部。但是，當導覽列固定後，它不會觸發更改導覽列樣式的事件。為了實現這一點，JavaScript 是必要的。一種方法是使用 IntersectionObserver。

Bootstrap 4：

在 Bootstrap 4 中，Affix 元件不可用。若要建立黏性導覽欄，請使用position:sticky屬性（並非所有瀏覽器都支援）。這會將導覽列黏到頂部，但是當導覽列變得黏性時，您需要使用 JavaScript 來切換導覽列的樣式。 IntersectionObserver 或 jQuery 外掛程式（例如 ScrollPos-Styler）可用於此目的。

其他方法：

或者，您可以使用 jQuery 的 $(window).scroll( ) 函數來變更特定捲動位置的導覽列樣式。當您知道導覽列應更改的確切位置時，此方法適用。

實作範例：

• [黏性頂部導覽列- IntersectionObserver示範](https://codepen.io/ChristianMartinelli/pen/jLLYEa)
• [黏性頂部導覽列- jQuery示範](https://codeply.com/go/62Roy6RDOa)

更多範例和詳細信息，請參閱這些資源：

• https://getbootstrap.com/docs/5.1/components/navbar/#sticky-top
• https://codeply.com/go/62Roy6RDOa
• https://www.itsolutionstuff.com/post/beautiful-sticky-navbar-using-bootstrap-4-with-jquery-javascript-example.html

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