使用iElevator.js模擬segmentfault的文章標題導航

iElevator.js是小弟業餘時間寫的一個jQuery小插件，純屬自娛自樂o(^▽^)o！感興趣的同窗能夠體驗一下，有問題或建議能夠直接提出，你們能夠共同討論學習！對於iElevator.js個人上篇文章已作介紹。

---

iElevator.js是一個jquery小插件，使用簡單，兼容IE6，支持UMD和3種配置方式，比錨點更靈活。並支持sticky定位！

1. 經過markdown隨便編寫一篇文章，並將其導出成html文件

#文章標題
##標題1
1
1
1
##標題2
2
2
2
##標題3
.
.
.

2. 建立文章導航

HTML:

<div class="sidebar" id="demo">
    <h3>文章目錄</h3>
    <div class="nav">
        <div class="highlight">
            
        </div>
        <ul class="list">
            
        </ul>
    </div>
</div>

Javascript:

// 獲取Markdown中的標題
    var $demo = $('#demo'),
        $titles = $('h2'),
        $nav = $demo.find('.list'),
        STR = '';
    // 填充標題
    $titles.each(function(){
        STR += '<li><a>'+ $(this).text() +'</a></li>';
    });
    $nav.html(STR);

對文章標題的獲取，能夠經過指定特定標識符來獲取，若是有副標題能夠經過遞歸來遍歷。

3. 調用ielevator

// 獲取Markdown中的標題
    var $demo = $('#demo'),
        $titles = $('h2'),
        $nav = $demo.find('.list'),
        $highlight = $demo.find('.highlight'),
        STR = '';
    // 填充標題
    $titles.each(function(){
        STR += '<li><a>'+ $(this).text() +'</a></li>';
    });
    $nav.html(STR);
    // 調用ielevator
    $demo.ielevator({
        floors: $titles,
        btns: $('#demo li'),
        sticky: 10,
        selected: $highlight
    });

配置項中sticky: 10使用sticky定位，與窗口的top的距離爲10。

4. 實現效果：http://zhansingsong.github.io/segmentfault