Bootstrap Affix 外掛 (高階)

Affix 外掛

Affix 外掛允許一個元素固定（鎖定）在頁面上的某個區域。這通常用於導航選單或社交圖示按鈕，使其在頁面上下滾動時“粘”在特定區域。

外掛根據滾動位置切換此行為的開啟和關閉（更改 CSS position 的值，從 static 到 fixed）。

示例 1) 固定導航欄

示例 2) 固定側邊欄

使用 Affix，當我們在頁面上上下滾動時，選單始終可見並鎖定在其位置。

如何建立固定的導航選單

以下示例展示瞭如何建立水平固定的導航選單

以下示例展示瞭如何建立垂直固定的導航選單

示例解釋

將 data-spy="affix" 新增到您要固定的元素上。

可選地，新增 data-offset-top|bottom 屬性來計算滾動的位置。

工作原理

Affix 外掛在三個類之間切換：.affix、.affix-top 和 .affix-bottom。每個類代表一個特定的狀態。您必須新增 CSS 屬性來處理實際的位置，除了 .affix 類的 position:fixed。

• 外掛會新增 .affix-top 或 .affix-bottom 類來指示元素處於其最頂部或最底部的位置。此時不需要使用 CSS 進行定位。


• 滾動到固定元素之後會觸發實際的固定 - 在這裡外掛會用 .affix 類替換 .affix-top 或 .affix-bottom 類（設定 position:fixed）。此時，您必須新增 CSS top 或 bottom 屬性來在頁面上定位固定的元素。


• 如果定義了底部偏移，滾動到其下方會用 .affix-bottom 替換 .affix 類。由於偏移是可選的，設定一個偏移需要您設定相應的 CSS。在這種情況下，如果需要，新增 position:absolute。

在上面的第一個示例中，當我們從頂部滾動了 197 畫素後，Affix 外掛將 .affix 類（position:fixed）新增到 <nav> 元素上。如果您開啟該示例，還會看到我們在 .affix 類中添加了 top 屬性，值為 0。這是為了確保導航欄在滾動到距離頂部 197 畫素時始終保持在頁面頂部。

滾動監聽和固釘

將 Affix 外掛與 Scrollspy 外掛結合使用

完整的 Bootstrap Affix 參考

有關所有 Affix 方法和事件的完整參考，請訪問我們的 Bootstrap JS Affix 參考。