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

html代碼圖如下：



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

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