使用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