本來(lái)使用bootstrap自帶的 affix 好像很方便的樣子庭瑰，但是我的導(dǎo)航條已經(jīng)自定義好了彤枢，同時(shí)發(fā)現(xiàn)affix列表長(zhǎng)度如果超過(guò)當(dāng)前頁(yè)面的話會(huì)被截?cái)嘌坠Γ跃头艞塧ffix了ORZ……
先祭出神器 waypoints 栓拜！
使用waypoint特別需要注意的是一膨，如果在一個(gè)div中使用waypoint是需要指定context的……（簡(jiǎn)直不敢說(shuō)自己糾結(jié)了大半天 waypoints not working）
import jquery.waypoints.min.js呀邢，以下代碼實(shí)現(xiàn)了滾動(dòng)內(nèi)容時(shí)導(dǎo)航欄自動(dòng)切換到對(duì)應(yīng)的 a 標(biāo)簽：
$('.contentMark').each(function() {
$(this).waypoint(function(direction) {
$('.aList a').removeClass("active");
var tmpHref = '#' + this.element.id;
$('#aList a').each(function() {
if ($(this).attr("href") == tmpHref) {
if (direction == 'down') {//如果向下滾動(dòng)經(jīng)過(guò)一個(gè)mark，則置當(dāng)前mark對(duì)應(yīng)的導(dǎo)航a置為激活
$(this).addClass('active');
} else if (direction == 'up') {//如果向上滾動(dòng)經(jīng)過(guò)一個(gè)mark豹绪，則置當(dāng)前mark的上一個(gè)mark對(duì)應(yīng)的導(dǎo)航a置為激活
$(this).prev().addClass('active');
}
return false;//break
}
});
}, {
context: document.getElementById('content')
});
});
