Bootstrap每天必學之附加導航（Affix）插件_javascript技巧
附加導覽（Affix）外掛程式允許某個
如果您想要單獨引用該外掛程式的功能，那麼您需要引用 affix.js。
一、用法
可以透過 data 屬性或透過 JavaScript 來使用附加導航（Affix）外掛程式。
1.透過 data 屬性：如需在元素中新增附加導航（Affix）行為，只需要在需要監聽的元素中加入 data-spy="affix" 即可。請使用偏移來定義何時切換元素的鎖定和移動。
2、透過 JavaScript：您可以透過 JavaScript 手動為某個元素新增附加導航（Affix）
二、透過 CSS 定位
在上面兩種使用附加導覽（Affix）外掛程式的方式中，您都必須透過 CSS 定位內容。附加導航（Affix）外掛程式在三種 class 之間切換，每種 class 都呈現了特定的狀態： .affix、.affix-top 和 .affix-bottom。請按照下面的步驟，來為這三種狀態設定您自己的 CSS（不依賴此外掛）。
1.在開始時，插件會加入 .affix-top 來指示元素在它的最頂端位置。這時候不需要任何的 CSS 定位。
2、當滾動經過添加了附加導航（Affix）的元素時，應觸發實際的附加導航（Affix）。此時 .affix 會取代 .affix-top，同時設定 position: fixed;（由 Bootstrap 的 CSS 程式碼提供）。
3.如果定義了底部偏移，當滾動到達該位置時，應把 .affix 替換為 .affix-bottom。由於偏移是可選的，如果設定了該偏移，則要求同時設定適當的 CSS。在這種情況下，請在必要的時候加入 position: absolute;。
三、選項
有一些選項是透過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：
四、實例
附加導航即貼在螢幕某處實現錨點功能。
1.基本實例
<body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron" style="height:150px"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked" data-spy="affix"data-offset-top="150"> <li class="active"> <a href="#section-1">第一部分 </a> </li> <li> <a href="#section-2">第二部分</a> </li> <li> <a href="#section-3">第三部分</a> </li> <li> <a href="#section-4">第四部分</a> </li> <li> <a href="#section-4">第五部分</a> </li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p> ... </p> <h2 id="section-2">第二部分</h2> <p> ... </p> <h2 id="section-3">第三部分</h2> <p> ... </p> <h2 id="section-4">第四部分</h2> <p> ... </p> <h2 id="section-5">第四部分</h2> <p> ... </p> </div> </div> </div>
2、導覽的 CSS 部分
ul.nav-pills {
width: 200px;
}
ul.nav-pills.affix {
top: 30px;
}
//JavaScript 代替 data-spy="affix" data-offset-top="125"
$('#myAffix').affix({
offset : {
top : 150
}
})
我們預設使用的是 top，當然也可以預設居底 bottom。這個定位方式是直接透過 CSS定位的。
//设置成 bottom
ul.nav-tabs.affix-bottom {
bottom: 30px;
}
//设置成 bottom
$('#myAffix').affix({
offset : {
bottom : 150
}
})
Affix 包含幾個事件，如下：
//其他雷同
$('#myAffix').on('affixed-top.bs.affix', function() {
alert('触发！');
});
更多內容可以參考：Bootstrap學習教學
以上就是本文的全部內容，希望對大家的學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
