在一些前端頁面中有一種效果是隨著頁面的下滑到不同的區(qū)域，懸浮的菜單欄隨著頁面滑動(dòng)到不同區(qū)域定位菜單欄里不同的分類，而點(diǎn)擊懸浮菜單欄里的分類頁面會(huì)跳至到相對(duì)應(yīng)的區(qū)域如下圖：

html代碼圖如下：



css部分懸浮導(dǎo)航欄需要絕對(duì)定位（position：fixed），其他的就沒什么需要特別說明了。
js如圖：
 

如圖所示，獲取懸浮菜單欄距離頂部的距離，再獲取當(dāng)前滾動(dòng)條距離頂部的距離，用if判斷滾動(dòng)條的滑動(dòng)距離大于等于定位元素距離瀏覽器頂部的距離，就固定（static），反之就不固定（fixed）。獲取懸浮導(dǎo)航欄子目錄的個(gè)數(shù)，然后為頁面添加頁面滾動(dòng)監(jiān)聽事件，用循環(huán)分別獲取不同區(qū)域距離頂部的距離，用if判斷比較當(dāng)小于等于懸浮導(dǎo)航欄距離頂部的距離時(shí)，對(duì)應(yīng)的懸浮導(dǎo)航欄分類添加類名on，其余的分類有類名on的刪除類名。