引言
在寫博客的時候,為了條理性起見玩般,經(jīng)常會使用許多小標(biāo)題银觅,當(dāng)文章長時,需要來回在不同的標(biāo)題之間穿梭坏为,如果手動添加目錄设拟,添加錨點,實在是麻煩久脯,為此纳胧,可以動態(tài)生成一塊目錄區(qū)域,并使用Bootstrap提供的Affix插件將目錄區(qū)域固定在頁面上帘撰。Bootstrap文檔便使用了它
準(zhǔn)備工作-引入bootstrap.min.js
- 將bootstrap.min.js放入body之前的script標(biāo)簽中跑慕,
uikit.min.js暫時不引入
。
引入相關(guān)插件之后,我們的思路是首先根據(jù)文章自動生成錨點以及菜單內(nèi)容核行,隨后為其添加Affix產(chǎn)生固定效果牢硅,再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法幾乎一致)。
引-學(xué)習(xí)Affix的使用
Affix插件尅幫助我們固定導(dǎo)航部分的位置芝雪,并且根據(jù)用戶的滾動情況來為固定的元素增加垂直偏移量减余,使得nav在三個類之間進(jìn)行切換:
1.affix-top
:表示在頂端
2.affix
:表示在頁面滾動,增加fixed屬性惩系,同時使用自定義的offset偏移量
3.affix-bottom
:表示到達(dá)最底端
啟用Affix只需要以下代碼:
$('#nav').affix({
offset: {
top:$('header').offset().top,
bottom: ($('footer').outerHeight(true) +
$('.application').outerHeight(true)) + 40
}
});
一位岔、組織HTML代碼部分
<ul id="mysidebar" class="nav affix" >
</ul>
一定要注意為ul添加nav和affix類。
二堡牡、生成封裝代碼
將本代碼段引入到你自己的script腳本中
;$.fn.extend({
"createAffix": function(selector) {
$list = $("" + selector),
length = $list.length,
affixValue = "";
for (var i = 0; i < length; i++) {
//給每一個標(biāo)題增加name屬性
$list.eq(i).attr("id", ("node" + i));
var text = $list.eq(i).text();
if (i == 0) {
affixValue += "<li><a href=#node" + i + " class='active' >" + text + "</a></li>";
} else {
affixValue += "<li><a href=#node" + i + ">" + text + "</a></li>";
}
}
this.append(affixValue);
this.affix({
offset: {
top: this.offset().top//在固定之后距離頂部的偏移量
}
});
return this;
}
});
上述代碼的原理是為createAffix函數(shù)傳入需要被認(rèn)為是標(biāo)題單元的標(biāo)簽或者類抒抬,在遍歷過程中為其增加錨點鏈接。
三晤柄、使用方法
書寫HTML部分
<ul id="mysidebar" class="nav affix" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>
<h3 id="node1">標(biāo)題1</h3>
<h3 id="node2">標(biāo)題2</h3>
<h3 id="node3">標(biāo)題3</h3>
書寫Javascript部分
$(function(){
$(' #mysidebar').createAffix('h3');
//表示在文章中擦剑,使用`h3`標(biāo)簽的是 需要被添加錨點的地方。
});
解決錨點偏移的問題
因為錨點默認(rèn)將頁面偏移到錨點元素的頂部芥颈,也就是如果我們對標(biāo)題1
進(jìn)行了上述操作惠勒,當(dāng)我們點擊錨點時,頁面會偏移到'標(biāo)題1'所在的頂端位置爬坑,如果頂端有菜單欄捉撮,那么將會被遮住
,通過設(shè)置css樣式來解決妇垢。
.class{
/*
添加padding可以讓錨點向下偏移num px,也就是跳過菜單欄的高度肉康,
通過設(shè)置margin-top為負(fù)值來`彌補`因為padding-top帶來的空白部分
*/
padding-top: num px;
margin-top: -num px;
}
添加滾動監(jiān)聽
目前我們的DOM文檔是這樣的闯估。
<ul id="mysidebar" class="nav affix" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>
加工一下,引入uikit屬性,具體查看文檔
<ul id="mysidebar" class="nav affix uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>
引入uikit.min.js
由于我們的菜單項(li
)是在文檔加載后執(zhí)行的吼和,那么如果在生成菜單項之前變執(zhí)行uikit的scrollspy涨薪,那么必定不起作用,所以要在菜單項生成后引入uikit.min.js炫乓,代碼如下:
$(function(){
$(' #mysidebar').createAffix('h3');//生成菜單
$.getScript("uikit.min.js");//異步載入uikit.min.js刚夺,滾動監(jiān)聽生效。
});