Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
附加導(dǎo)航（Affix）插件允許某個(gè) <div> 固定在頁面的某個(gè)位置。您也可以在打開或關(guān)閉使用該插件之間進(jìn)行切換。一個(gè)常見的例子是社交圖標(biāo)。它們將在某個(gè)位置開始，但當(dāng)頁面點(diǎn)擊某個(gè)標(biāo)記，該 <div> 會(huì)鎖定在某個(gè)位置，不會(huì)隨著頁面其他部分一起滾動(dòng)。
如果您想要單獨(dú)引用該插件的功能，那么您需要引用 affix.js。
一、用法
可以通過 data 屬性或者通過 JavaScript 來使用附加導(dǎo)航（Affix）插件。
1、通過 data 屬性：如需向元素添加附加導(dǎo)航（Affix）行為，只需要向需要監(jiān)聽的元素添加 data-spy="affix" 即可。請(qǐng)使用偏移來定義何時(shí)切換元素的鎖定和移動(dòng)。
2、通過 JavaScript：您可以通過 JavaScript 手動(dòng)為某個(gè)元素添加附加導(dǎo)航（Affix）
二、通過 CSS 定位
在上面兩種使用附加導(dǎo)航（Affix）插件的方式中，您都必須通過 CSS 定位內(nèi)容。附加導(dǎo)航（Affix）插件在三種 class 之間切換，每種 class 都呈現(xiàn)了特定的狀態(tài)： .affix、.affix-top 和 .affix-bottom。請(qǐng)按照下面的步驟，來為這三種狀態(tài)設(shè)置您自己的 CSS（不依賴此插件）。
1、在開始時(shí)，插件添加 .affix-top 來指示元素在它的最頂端位置。這個(gè)時(shí)候不需要任何的 CSS 定位。
2、當(dāng)滾動(dòng)經(jīng)過添加了附加導(dǎo)航（Affix）的元素時(shí)，應(yīng)觸發(fā)實(shí)際的附加導(dǎo)航（Affix）。此時(shí) .affix 會(huì)替代 .affix-top，同時(shí)設(shè)置 position: fixed;（由 Bootstrap 的 CSS 代碼提供）。
3、如果定義了底部偏移，當(dāng)滾動(dòng)到達(dá)該位置時(shí)，應(yīng)把 .affix 替換為 .affix-bottom。由于偏移是可選的，假如設(shè)置了該偏移，則要求同時(shí)設(shè)置適當(dāng)?shù)?CSS。在這種情況下，請(qǐng)?jiān)诒匾臅r(shí)候添加 position: absolute;。
三、選項(xiàng)
有一些選項(xiàng)是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項(xiàng)：
四、實(shí)例
附加導(dǎo)航即粘貼在屏幕某處實(shí)現(xiàn)錨點(diǎn)功能。
1、基本實(shí)例
<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、導(dǎo)航的 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
}
})
我們默認(rèn)使用的是 top，當(dāng)然也可以默認(rèn)居底 bottom。這個(gè)定位方式是直接通過 CSS定位的。
//設(shè)置成 bottom
ul.nav-tabs.affix-bottom {
bottom: 30px;
}
//設(shè)置成 bottom
$('#myAffix').affix({
offset : {
bottom : 150
}
})
Affix 包含幾個(gè)事件，如下：
//其他雷同
$('#myAffix').on('affixed-top.bs.affix', function() {
alert('觸發(fā)！');
});
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- Bootstrap多級(jí)導(dǎo)航欄(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- Bootstrap導(dǎo)航中表單簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
最近發(fā)現(xiàn)JS當(dāng)中toFixed()方法存在一些問題,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于JS中toFixed(2)精度問題的原因以及解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法,涉及javascript動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,適用于動(dòng)態(tài)更換頁面皮膚的功能,需要的朋友可以參考下2015-08-08
JS實(shí)現(xiàn)的合并多個(gè)數(shù)組去重算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的合并多個(gè)數(shù)組去重算法,涉及javascript數(shù)組遍歷、判斷、運(yùn)算、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例
圖片懶加載也是比較常見的一種性能優(yōu)化的方法，本篇文章主要介紹了原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2017-06-06
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加。2011-03-03
JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫常用導(dǎo)航鼠標(biāo)下經(jīng)過下方橫線自動(dòng)跟隨效果，文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap縮略圖與警告框?qū)W習(xí)使用的相關(guān)資料，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警告框，從中得到收獲2017-02-02
javascript多行字符串的簡(jiǎn)單實(shí)現(xiàn)方式
之前我們給大家講訴過javascript多行字符串的7種解決辦法，今天來給大家分享一個(gè)更簡(jiǎn)單的方法，非常的實(shí)用，大家一定要仔細(xì)看看哦。2015-05-05
JavaScript中的子窗口與父窗口的互相調(diào)用問題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問題，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-02-02
javascript GUID生成器實(shí)現(xiàn)代碼
javascript GUID生成器實(shí)現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10