Bootstrap JS 固釘
JS 固釘 (affix.js)
固釘外掛允許一個元素被固定（鎖定）在頁面上的某個區域。這通常用於導航選單或社交圖示按鈕，使其在頁面上下滾動時“固定”在特定區域。
該外掛根據滾動位置切換此行為的開/關（將 CSS position 的值從 static 更改為 fixed）。
固釘外掛在三個類之間切換：.affix、.affix-top 和 .affix-bottom。每個類代表一個特定的狀態。您必須新增 CSS 屬性來處理實際位置，但 .affix 類上的 position:fixed 除外。
欲瞭解更多資訊，請閱讀我們的 Bootstrap 固釘教程。
提示：固釘外掛經常與 滾動監聽 外掛一起使用。
透過 data-* 屬性
將 data-spy="affix" 新增到您要監聽的元素，並新增 data-offset-top|bottom="number" 屬性以計算滾動位置。
透過 JavaScript
使用以下命令手動啟用：
固釘選項
選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性，將選項名稱附加到 data-，例如 data-offset=""。
| 名稱 | 型別 | 預設值 | 描述 |
|---|---|---|---|
| offset | 數字 | 物件 | 函式 | 10 | 指定計算滾動位置時與螢幕的偏移畫素數。當使用單個數字時，偏移量會新增到頂部和底部方向。如果您只想控制頂部或底部，請使用物件，例如 offset: {top:25}對於多個偏移量，請使用 offset: {top:25, bottom:50}提示：使用函式動態提供偏移量（對於響應式設計可能很有用） |
| target | 選擇器 | 節點 | 元素 | 視窗物件 | 指定固釘的目標元素 |
固釘事件
下表列出了所有可用的固釘事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| affix.bs.affix | 在將固定定位新增到元素之前發生（例如，當 .affix-top 類即將被 .affix 類替換時） |
試一試 |
| affixed.bs.affix | 在將固定定位新增到元素之後發生（例如，在 .affix-top 類被 .affix 類替換之後） |
試一試 |
| affix-top.bs.affix | 在頂部元素返回其原始（非固定）位置之前發生（例如，.affix 類即將被 .affix-top 替換時） |
試一試 |
| affixed-top.bs.affix | 在頂部元素返回其原始（非固定）位置之後發生（例如，.affix 類已被 .affix-top 替換之後） |
試一試 |
| affix-bottom.bs.affix | 在底部元素返回其原始（非固定）位置之前發生（例如，.affix 類即將被 .affix-bottom 替換時） |
試一試 |
| affixed-bottom.bs.affix | 在底部元素返回其原始（非固定）位置之後發生（例如，.affix 類已被 .affix-bottom 替換之後） |
試一試 |
更多示例
固定導航欄
建立一個水平固定的導航選單
使用 jQuery 自動固定導航欄
使用 jQuery 的 outerHeight() 方法在使用者滾動經過指定元素（<header>）後固定導航欄
滾動監聽和固釘
將固釘外掛與 滾動監聽 外掛一起使用
水平選單（導航欄）
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
自己動手試一試 »
垂直選單（側邊導航）
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
自己動手試一試 »
固釘時的動畫導航欄
使用 CSS 操作不同的 .affix 類
示例 - 滾動時更改導航欄的背景顏色和填充
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
自己動手試一試 »
示例 - 滑入導航欄
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
自己動手試一試 »
