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