一.基本思路

文章目录都是动态生成的，

基本原理是扫描文章主题内容，获取指定标签（比如H1,h2），然后生成一个目录列表，

将生成的目录列表插入到文章页面.

给目录加上一些展开/收起/浮动之类的事件，处理页面滚动事件，修改目录当前所在样式。

美化目录等...

二.实现

2.1 基本参数配置

先定义下基本参数配置，定下需要作为目录的标签级别，h1,h2.


    /**
     * 插件的默认值
     */
    $.fn.autoMenu.defaults = {
        levelOne : 'h1,ul', //一级标题
        levelTwo : 'h2',  //二级标题（暂不支持更多级）
        width : 200, //容器宽度
        height : 400, //容器高度
        padding: 20, //内部间距
        offTop : 100, //滚动切换导航时离顶部的距离

    };

2.2 文章扫描

然后扫描文章获取指定标签内容，递增id,扫描内容放入li标签，最后汇总到Ul标签中.

同时给每个标签加上一个id属性方便后面的定位操作.

 $(that.$element).find("*") .each(function(){
                    var _this = $(this);
                    if(opts.levelOne.toUpperCase().indexOf( _this.get(0).tagName)>-1 ){
                        _this.attr('id',num);
                        var nodetext = that.handleTxt(_this.html());
                        html += '<li name="'+ num +'"><a href="#'+ num +'">'+ nodetext +'</a></li>';
                        num++;
                    }else if(_this.get(0).tagName == opts.levelTwo.toUpperCase()){
                        _this.attr('id',num);
                        var nodetext = that.handleTxt(_this.html());
                        html += '<li class="sub" name="'+ num +'"><a href="#'+ num +'">'+ nodetext +'</a></li>';
                        num++;
                    }
                })

2.3 检测当前激活的菜单

根据页面的scrollTop, 及文章中各个标签的 offset().top来判断，具体滑动到哪个级别了

  
 var $el = this.$element,
                    opts = this.settings,
                    items = opts.levelOne + ',' + opts.levelTwo,
                    $items = $el.find(items),
                    offTop = opts.offTop,
                    top = $(document).scrollTop(),
                    currentId;

if($(document).scrollTop()==0){
                    //初始化active
                    $el.parents().find('.autoMenu li').removeClass('active').eq(0).addClass('active');
                    return;
                }
                $items.each(function(){
                    var m = $(this),
                        itemTop = m.offset().top;
                    if(top > itemTop-offTop){
                        currentId = m.attr('id');
                    }else{
                        return false;
                    }
                });

$el.parents().find('.autoMenu li').removeClass('active');
$el.parents().find('.autoMenu li[name='+currentId+']').addClass('active');

2.4 增加菜单事件

给菜单增加下收缩/展开/浮动/固定事件

这边因为按钮都是添加的 .btn-box class，所以直接过滤这个class就好，

后面根据按钮的class来判断处理逻辑即可.

 _this.$element. parents().find(".autoMenu .btn-box").on('click',function(){
                    if($(this).find('span').hasClass('icon-minus-sign')){
                        $(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
                        _this.$element.parents().find('.autoMenu  ul').fadeOut();
                        $(this).attr("title",'显示目录');
                    }else  if($(this).find('span').hasClass('icon-plus-sign')){
                        $(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
                        _this.$element.parents().find('.autoMenu  ul').fadeIn();
                        $(this).attr("title",'隐藏目录');
                    }
                    else  if($(this).find('span').hasClass('fa-compress')){
                        $(this).find('span').removeClass('fa-compress').addClass('fa-expand');
                        _this.$element.parents().find('.autoMenu ').toggleClass("fix");
                        $(this).attr("title",'浮动目录');
                    }
                    else  if($(this).find('span').hasClass('fa-expand')){
                        $(this).find('span').removeClass('fa-expand').addClass('fa-compress');
                        _this.$element.parents().find('.autoMenu ').toggleClass("fix");
                        $(this).attr("title",'固定目录');
                    }
                    
                })

三.样式

最外层的框架及固定/悬浮样式，让postion:变成fixed即可.

.autoMenu {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    font-family: 'Microsoft Yahei';
    line-height: 25px;

    position: inherit;
    float: right;
	top: 20%;
	right: 5%;
	z-index: 1;
	text-align: left;
	
		border-left: 5px solid #1a71b0!important;
    background: #f2efef!important;
    
    -webkit-box-shadow:0 0 10px #257ab7;  
  -moz-box-shadow:0 0 10px #257ab7;  
  box-shadow:0 0 10px #257ab7;
  
  margin: 5px;
  padding: 5px;
   
}

.autoMenu.fix{
	   position: fixed!important;
}

这个是上面的操作按钮

.autoMenu .btn-box{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-decoration: none;
    position: relative;
    float: right;
}

其他的就是ul/li的样式了，这个可以根据自己的要求做修改就好了。

基本都放在jquery.autoMenu.css，

固定样式：