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

html代碼圖如下：



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

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