在網(wǎng)站中的產(chǎn)品或者案例詳情頁，往往會被分成許多塊不同區(qū)域（如：產(chǎn)品的特性、參數(shù)、視頻、文字介紹），內(nèi)容多且過長，不方便用戶瀏覽頁面，這時就要用到本文章所做的效果了（jq實現(xiàn)點擊導(dǎo)航欄滾動到對應(yīng)位置和導(dǎo)航欄菜單項隨頁面滾動而變化）。html如圖：
 

 
css如圖：
 

 
js如圖：
 

如上圖，先是獲取頁面主要的區(qū)域的個數(shù)，然后觸發(fā)鼠標(biāo)滾動事件函數(shù)，循環(huán)獲取頁面導(dǎo)航欄和各個塊（區(qū)域）到頂部距離，因為導(dǎo)航欄是絕對定位的，它距離頂部的距離也是實時變動的，在滾動鼠標(biāo)觸發(fā)滾動事件時通過for循環(huán)當(dāng)頁面的導(dǎo)航欄距離頂部的值大于某一塊到頂部的距離，而小于下一塊到頂部距離的值時，當(dāng)前所在塊的的下標(biāo)對應(yīng)導(dǎo)航欄的下標(biāo)的某一欄目添加選中狀態(tài)，其余的刪除選中狀態(tài)；點擊導(dǎo)航欄上的欄目，獲取點擊欄目的下標(biāo)，獲取同為當(dāng)前下標(biāo)的內(nèi)容塊到頂部的距離，讓滾動條到頂部的距離值為當(dāng)前下標(biāo)的內(nèi)容塊到頂部的距離。