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)文章
奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒少折騰時(shí)間.2010-07-07
快速掌握WordPress中加載JavaScript腳本的方法
這篇文章主要介紹了快速掌握WordPress中加載JavaScript腳本的方法,以及響應(yīng)的CSS樣式加載方法的簡(jiǎn)介,需要的朋友可以參考下2015-12-12
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三)：鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下2015-06-06
js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)潔的TAB滑動(dòng)門效果代碼,通過簡(jiǎn)單的JavaScript自定義函數(shù)動(dòng)態(tài)遍歷頁面元素實(shí)現(xiàn)tab滑動(dòng)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
indexOf在js中有著重要的作用,可以判斷一個(gè)元素是否在數(shù)組中存在,或者判斷一個(gè)字符是否在字符串中存在,下面這篇文章主要給大家介紹了關(guān)于js中indexOf()簡(jiǎn)單使用的相關(guān)資料,需要的朋友可以參考下2023-01-01
Rxjs?TakeUntil?操作符內(nèi)容梳理總結(jié)
這篇文章主要介紹了Rxjs?TakeUntil操作符內(nèi)容梳理總結(jié)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
BootStrap Table 分頁后重新搜索問題的解決辦法
這篇文章主要介紹了BootStrap Table 分頁后重新搜索問題的解決辦法,自定義搜索且有分頁功能,比如搜索產(chǎn)品名的功能。小編給大家?guī)砹岁P(guān)鍵代碼，非常不錯(cuò)，需要的朋友可以參考下2016-08-08
微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法實(shí)例代碼
微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁面方法的相關(guān)資料,需要的朋友可以參考下2022-08-08
js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容的具體實(shí)現(xiàn)方法
我們經(jīng)常會(huì)看到很多的網(wǎng)站會(huì)看到有下拉列表的內(nèi)容進(jìn)行直接增加與移除，下面我來介紹一款js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容實(shí)例2013-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上下切換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11