導(dǎo)航欄固定頂部跟隨效果在網(wǎng)站上是很常見(jiàn)的，許多頁(yè)面內(nèi)容很長(zhǎng)時(shí)，需要這種效果來(lái)迅速跳轉(zhuǎn)不同頁(yè)面區(qū)域，今天來(lái)寫(xiě)一個(gè)比較簡(jiǎn)單的導(dǎo)航欄固定頂部跟隨效果的demo。
效果如圖：

HTML如圖：

CSS如圖：

JS如圖：

這里主要講解的是js部分，demo引入了jQuery，使用jQuery語(yǔ)法先聲明navTop把導(dǎo)航欄（#navBox）距離頂部的距離賦值給它，在寫(xiě)一個(gè)滾動(dòng)事件的函數(shù)（scroll（）），獲取滾動(dòng)條距離頂部的距離 賦值給scrollTop，在滾動(dòng)函數(shù)里用if判斷比較這個(gè)的值，當(dāng)scrollTop大于等于navTop，添加一個(gè)樣式類(lèi)名，使其定位在頁(yè)面頂部，反之，刪除此類(lèi)名還原導(dǎo)航欄。

當(dāng)滑動(dòng)滾動(dòng)條時(shí)，頁(yè)面區(qū)域滾動(dòng)到不同區(qū)域，導(dǎo)航欄需要相對(duì)應(yīng)到不同區(qū)域的a鏈接是選中的狀態(tài)，這就要先獲取每個(gè)區(qū)域距離頂部的值，先聲明一個(gè)arr空數(shù)組，然后each循環(huán)每個(gè)區(qū)域模塊距離頂部的值，通過(guò)push添加每個(gè)值到arr數(shù)組里，最后觸發(fā)滾動(dòng)函數(shù)時(shí)，for循環(huán)里通過(guò)i++條件和if判斷當(dāng)前滾動(dòng)條距離頂部的值大于等于第i個(gè)的值和state的布爾值，通過(guò)下標(biāo)同樣設(shè)置a鏈接添加選中類(lèi)名，滾動(dòng)事件結(jié)束時(shí)設(shè)置state的值為true，防止點(diǎn)擊a鏈接時(shí)添加類(lèi)名對(duì)應(yīng)不上。

先聲明state不賦值，當(dāng)點(diǎn)擊導(dǎo)航欄的a鏈接時(shí)把布爾值false賦值給state，同時(shí)頁(yè)面會(huì)顯示根據(jù)a鏈接href值的id跳轉(zhuǎn)到相對(duì)應(yīng)id的區(qū)域模塊。