閱讀本文約需要5分鐘
大家好，我是你們的導師，我每天都會給大家分享一些幹貨内容(當然了，周末也要允許老師休息一下哈)。上次給大家分享了下GIF表情生成器，今天給大家分享下自動生成導航功能。
技術文檔，或者一些官網首頁，重展示，基本上都是一個一個的段落組成，每個段落會有一個标題，此時頁面往往會很長很長，如果使用者閱讀時候關心的隻是中間某個段落，則互動體驗并不友好，此時，就需要有一個頁面内的标題導航，使用者直接點選導航菜單，就能定位到對應的标題，此時閱讀起來就省心多了。
由于這種互動實作并不難，是以，以前我都是直接現寫一段JS腳本滿足功能。近期，我又遇到需要這樣處理的互動場景，琢磨了下，從業這麼久，這種互動現寫的場景估計一個巴掌都數不過來了吧，以後估計還會遇到這樣的互動場景，一不做二不休，有必要寫個即插即用的方法。
我就陪小朋友玩耍完畢後花了幾個小時迅速弄了下，寫了個名為jquery.titleNav.js的jQuery小插件。
1. jQuery小插件titleNav.js使用
頁面的JS使用如下：
就一行代碼。然後，需要下面的CSS配合：
實作的是右上方定位的垂直導航效果。如果我們希望實作的是頂部定位的水準導航效果，則修改.title-nav-ul和.title-nav-li這兩個類名的樣式即可，分别表示導航容器和導航清單。
2. API使用與說明
API如下：：$().titleNav(options);
其中，$()知道jQuery包裝器對象，在這裡特名額題元素。options為可選參數，具體見下表：
3. 關于自動生成的導航元素的DOM結構說明
自動生成的導航元素的DOM結構如下：
高亮效果如下圖：
可以看到有個類名active，這個就是用來标記目前哪個清單處于選中态的，用來控制導航的選中高亮效果，在本demo中就是單純文字加粗。
4. 其他說明
導航中清單點選後的定位效果不需要額外寫，插件已經幫忙完成了，且定位帶動畫哦；
另外，如果滾動到底部，同時有多個标題，插件會自動定位到最後一個導航，做了相關的細節優化；
相容IE8+以及其他現代浏覽器，以及移動端(不保證所有裝置都OK)。
今天就分享到這，今日留言話題：今天這個小插件會用了嗎？一起來說說吧，對于有價值的留言，我們都會一一回複的。如果覺得對你有一丢丢幫助，請點右下角【在看】，讓更多人看到該文章。
【我們直招】很苦逼，但工資超級高！