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

 
css如圖：
 

 
js如圖：
 

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