這個插件根據選定的目錄內容中的 h1, h2, h3, h4, h5, h6 標籤來自動生成目錄插入到選定的目錄容器中，並且提供一個漂亮的樣式效果
- 監聽內容區滾動
- 點擊跳轉功能
兼容性：IE10+ (由於使用了 node.classList)
地址戳這裏 github地址，歡迎star，issue，pr ~
1. 預覽
炫酷模式：
普通模式：
可以通過 線上DEMO 來預覽一下炫酷模式的效果
2. 實現思路
滾動的監聽通過 getBoundingClientRect 獲取元素大小以及相對視口的位置，判斷我們的監聽對象 h1~h6 標籤是否在視口中，如果在則添加 linkActiveClass 類。
傳統的錨點定位跳轉會與hash模式的單頁面應用的路由衝突，會導航到錯誤的路由路徑，這裏採用把要跳轉的id放到 dataset 中，跳轉的時候取出來使用 scrollIntoView 來進行平滑滾動到目標位置。
左邊的邊欄線則是使用 svg 的path來畫出來的，根據層級相應做一些調整，輔以css的 transition 的效果就可以呈現出不錯的移動效果。
3. Api
如果要使用默認的樣式，請手動引入
import 'progress-catalog/src/progress-catalog.css'
使用方法：
// 引入
import Catalog from 'ProgressCatalog'
// 使用
new Catalog({
contentEl: 'loading-animation',
catalogEl: `catalog-content-wrapper`,
selector: ['h2', 'h3']
})構造函數接受的參數：
contentEl [String]
需要檢索生成目錄的內容區的id選擇器，不需要加#
catalogEl [String]
將生成的目錄append進的目錄容器的id選擇器，不需要加#
scrollWrapper [可選, String]
監聽scroll事件的內容區容器的id選擇器，不需要加#，如果不填則默認是 contentEl 的父元素
linkClass [可選, String]
所有目錄項都有的類，默認值：cl-link
注意，如果設置了此值，則需要重寫默認樣式
linkActiveClass [可選, String]
激活的目錄項所有的類，默認值：cl-link-active
注意，如果設置了此值，則需要重寫默認樣式
selector [可選, Array]
選擇目錄的標題標籤，默認值：['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
如果只希望生成目標內容區的 h2, h3 標籤的目錄，那麼可以設置 selector: ['h2', 'h3']
activeHook [可選, Function]
當激活新的目錄項標籤的時候的回調函數
topMargin [可選, Number]
第一個目錄標籤在被認爲可見之前需要向下移動的距離，默認值：0
bottomMargin [可選, Number]
同上，向下移動的距離，默認值：0
cool [可選, Boolean]
炫酷模式開關，默認值：true
網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~
參考：