本節(jié)將分享的是如何讓導航欄高亮顯示當前滾動到的內容區(qū)域菌赖。
實現思路
監(jiān)聽滾動事件，通過每個模塊的id獲取該內容區(qū)域到頂部的距離告唆，然后與滾動距離做對比域携，在滾動到該區(qū)域時簇秒，給該內容塊對應的導航項添加高亮顯示，其他所有的則移除秀鞭。
代碼實現
參考代碼如下：
var navList = document.getElementById('navList');
// 獲取導航欄下的所有導航項
var oList=navList.getElementsByTagName("a");
// 獲取給內容塊距離頁面頂部的距離
var sTop=document.getElementById("service").offsetTop;
var aTop=document.getElementById("about").offsetTop;
var cTop=document.getElementById("contact").offsetTop;
// 定義讓某個導航項高亮的函數
function change(navIndex){
// 為了防止多次觸發(fā)趋观，該導航項添加上了高亮顯示后就不在反饋添加樣式
if (oList[navIndex].className.indexOf('active') === -1) {
for(var j=0;j<oList.length;j++){
if (j === navIndex) {
oList[j].className+="active";
} else {
oList[j].className ="";
}
}
}
}
// 監(jiān)聽滾動事件，對不同距離做處理
document.onscroll = function(){
var btop = document.body.scrollTop || document.documentElement.scrollTop;
if (btop > sTop -100 && btop <= aTop -100) {
change(1);
}else if(btop > aTop -100 && btop <= cTop -200){
change(2);
}else if(btop > cTop -200){
change(3);
} else if (btop < 100 ){
change(0);
}
}
