wordpress如何制作一个跟随滑动的文章目录？Content Index文章目录插件修改篇

大篇幅的文章-->没有目录懒得看...

读文章有技巧-->看目录...

目录很长一直在顶部上下滑动-->太累了...

一个让目录跟随滑动的技巧便产生了....

此文是为了解决在阅读一个篇幅很长的文章时候，会伴随一个文章目录在固定位置便于定位阅读，当文章目录高度大于可视窗口的高度时，文章目录便不会固定跟随 防止可视窗口遮挡住多余的目录。

1、wp后台配置

2、修改插件源码关闭自动请求加载插件的css

注释掉加载样式的代码，添加相应的样式到模板的主样式css中

相关文章目录添加的样式：

/*文章目录*/
.content-index a{text-decoration:none;}
.content-index a em{color:#555;}
.content-index a span{text-decoration:underline;font-size:12px;}
.content-index{padding:12px;border:1px solid #ddd;background:#f8f8f8;line-height:160%;max-width:30%;position:relative;z-index:1000;}
.content-index-title{margin:0 0 3px 0;padding:0;font-size:120%;font-weight:bold}
.content-index-toctoggle{font-size:9pt}
.content-index ul{padding:0;margin:0;list-style:none inside none;font-size:100%;}
.content-index ul.children{padding-left:1em;list-style:none inside none}
.content-index li{margin-bottom:0;line-height:18px;}
.content-index li a em{font-size:68%;font-style:normal;font-weight:700;padding-right:5px}
.content-index li a.hide{display:none}
.content-index-heading em{font-size:85%;font-style:normal;font-weight:700;margin-right:5px}
.content-index .content-index-level-1{}
.content-index .content-index-level-2{}
.content-index .content-index-level-3{}
.content-index .content-index-level-4{}
.content-index .content-index-level-5{}
.content-index .content-index-level-6{}
.content-index.moving{position:fixed;top:10px;opacity:0.4;filter:alpha(opacity=40);}
.content-index.moving:hover{position:fixed;top:10px;opacity:1;filter:alpha(opacity=100);}

3、修改插件默认隐藏文章目录 

意思就是不让默认展开目录，方法修改插件源码

4、添加js效果，鼠标滚动时目录固定位置

效果中判断了目录很多的情况下 高度会大于可视窗口的高

<script>
        $(function(){
            (function(){
                var $mulu=$('#content-index');
                var mulu_top =$mulu.offset().top;
                var mulu_left =$mulu.offset().left;
                var w_width=$('.article-content').outerWidth();
                $(window).scroll(function(){
                   if($(this).scrollTop()>mulu_top){
                        if($('#content-index-contents').is(':hidden')){
                           $mulu.addClass('moving').css({'left':mulu_left-10+'px'});
                        }else{
                            var clientH=document.documentElement.clientHeight;
                            var mulu_w=$mulu.outerWidth();
                            var mulu_h=$mulu.outerHeight();
                            if(mulu_h<clientH){
                                $mulu.css({'maxWidth':w_width/3-20+'px'})
                                $mulu.addClass('moving').css({'left':mulu_left+70-mulu_w+'px'});
                            }else{
                                $mulu.removeClass('moving').css({'left':''});
                            }
                        }
                   }else{
                       $mulu.removeClass('moving').css({'left':''});
                   }
                })
            })();
        })
    </script>

4、demo参考地址：

http://17dev.sinaapp.com/qianduan-xiulian-gonglue.html

http://17dev.sinaapp.com/201410_qian_duan_zi_yuan_fen_xiang.html