JS原生代碼實現導航高亮
一 實現原理
根據當前頁面滾動條的高度判斷當前頁面應當與導航欄中哪個導航相關聯，並對相應的導航設置高亮樣式。
二 代碼解析
先簡單寫一個頁面頂端的導航欄：
<nav>
<ul>
<li><a class="nav active" href="#nav1">導航1</a></li>
<li><a class="nav" href="#nav2">導航2</a></li>
<li><a class="nav" href="#nav3">導航3</a></li>
<li><a class="nav" href="#nav4">導航4</a></li>
</ul>
</nav>
註意這裏第一個導航初始添加一個active類，表示首頁默認對應導航1。
為每個導航寫一個對應的正文頁面：
<div id="nav1" class="section">這是頁面1</div>
<div id="nav2" class="section">這是頁面2</div>
<div id="nav3" class="section">這是頁面3</div>
<div id="nav4" class="section">這是頁面4</div>
然後添加導航的CSS：
*{margin:0px;} /*先清除瀏覽器默認外邊距*/
nav{
position:fixed;
width:100%;
z-index:999;
margin-top:0px
} /*fixed固定導航，並設置為最高層，防止被後面的元素遮蓋。*/
nav ul{
text-align:center;
height:45px;
line-height:45px;
background:#0B0B0B;
}
nav li,nav li a{
display:inline-block;
height:100%;
text-decoration:none;
color:#fff;
}
nav li a{padding:0 10px;}
nav li{margin:0 10px;}
a:hover, .active{color:#B6B6B6;} /*為鼠標懸浮的狀態以及當前頁面對應的導航設置不同的顏色*/
添加正文的CSS：
.section{height:660px;
width:100%;
margin:10px auto;
background:#F5F5F5;
padding-top:60px;
box-sizing:border-box;
border:1px solid red;
text-align:center;
} /*註意將box-sizing設為border-box，每個頁面的整體高度即為原來設定的高度，後面用JS計算頁面高度時免去計算content、padding、margin的麻煩*/
此時樣式如圖所示：
下一步通過JS實現導航狀態的切換：
首先獲取所有的導航：
var navs=document.getElementByClassName(‘nav‘);
定義導航的切換方法，即每次通過增加一個類名active來為其應用已經設定好的樣式，這裏有4個導航，所以需要給4個元素添加類名。
function reset(index){
for(var i=0;i<4;i++){
navs[i].className="nav"; //註意每次添加類名之前先清空之前設置的active，否則只要經過的頁面，對應的導航都是高亮狀態
}
navs[index].className += " active";
}
由於是根據當前頁面和滾動條的高度關聯，從而利用滾動條的當前高度來判斷應該切換哪個導航，因此要獲取兩個值：當前頁面距離文檔頂部的高度，以及當前滾動條的高度。
寫一個函數來根據id獲取單個頁面整體的高度height
function getHeight(id){
var elem=document.getElementById(id);
var height=parseInt(window.getComputedStyle(elem,null)[‘height‘]);
return height;
}
調用這個函數並累加得出每個頁面距離文檔頂部的距離（不是窗口）。由於總共4個導航對應4個頁面，所以只需判斷3個頁面即可。
var t1=getHeight("nav1");
var t2=t1+getHeight("nav2");
var t3=t2+getHeight("nav3");
再寫一個函數通過將當前滾輪高度和當前頁面距離文檔頂部的高度來作比較，判斷應當切換到哪個導航。將頁面的滾動事件綁定到這個函數，實時獲取滾輪高度的值，實現導航樣式的實時切換：
window.onscroll=function changeCss(){
var t=document.documentElement.scrollTop || document.body.scrollTop; //獲取當前頁面滾動條的高度
if (t<t1){
reset(0); //當頁面還處於第一頁時，第一個導航亮起
} else if (t<t2){
reset(1); //當頁面滾動到第二頁時，第一個導航熄滅，第二個導航亮起
} else if (t<t3){
reset(2);
} else{
reset(3);
}
}
三 完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>別踩白塊</title>
<style>
*{margin:0px;}
nav{position:fixed;width:100%;z-index:999;} /*fixed固定導航，並設置為最高層，防止被後面的元素遮蓋。*/
nav ul{margin-top:0px;text-align:center;height:45px;line-height:45px;background:#0B0B0B;}
nav li,nav li a{display:inline-block;height:100%; text-decoration:none;color:#fff;}
nav li a{padding:0 10px;}
nav li{margin:0 10px;}
a:hover, .active{color:#B6B6B6;} /*為鼠標懸浮的狀態以及當前頁面對應的導航設置不同的顏色*/
.section{height:660px;width:100%;margin:0px auto;background:#F5F5F5;padding-top:60px;box-sizing:border-box;border:1px solid red;text-align:center;}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav active" href="#nav1">導航1</a></li>
<li><a class="nav" href="#nav2">導航2</a></li>
<li><a class="nav" href="#nav3">導航3</a></li>
<li><a class="nav" href="#nav4">導航4</a></li>
</ul>
</nav>
<div id="nav1" class="section">這是頁面1</div>
<div id="nav2" class="section">這是頁面2</div>
<div id="nav3" class="section">這是頁面3</div>
<div id="nav4" class="section">這是頁面4</div>
<script>
var navs=document.getElementsByClassName(‘nav‘);
function reset(index){
for(var i=0;i<4;i++){
navs[i].className="nav"; //註意每次添加類名之前先清空之前設置的active，否則只要經過的頁面，對應的導航都是高亮狀態
}
navs[index].className += " active";
}
function getHeight(id){
var elem=document.getElementById(id);
var height=parseInt(window.getComputedStyle(elem,null)[‘height‘]); //計算渲染後的style值
return height;
}
var t1=getHeight("nav1");
var t2=t1+getHeight("nav2");
var t3=t2+getHeight("nav3");
window.onscroll=function changeCss(){
var t=document.documentElement.scrollTop || document.body.scrollTop; //獲取當前頁面滾動條的高度
if (t<t1){
reset(0); //當頁面還處於第一頁時，第一個導航亮起
} else if (t<t2){
reset(1); //當頁面滾動到第二頁時，第一個導航熄滅，第二個導航亮起
} else if (t<t3){
reset(2);
} else{
reset(3);
}
}
</script>
</body>
</html>
這一次是自己設計自己寫的，所以沒有視頻資源。實際上用JQuery實現起來會更方便，但是用原生代碼能夠了解底層原理，加深理解。導航高亮的實現方式還有別的方法，例如利用URL與頁面的對應關系，根據URL的變化判斷當前頁面應該對應的導航欄，但是這種方法也有一定的局限性，並不能適用於所有場景。
JS原生代碼實現導航高亮