ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
/*文章内容区*/
#content {
    width:400px;
    margin: 0 auto;
    font-size: 2em;
}
/*悬浮菜单*/
.menu {
    position: fixed;
    top:20%;
    right: 0;
    width:200px;
    border: 1px solid gray;
    border-radius: 5px;
}
.menu li {
    height: 2em;
    line-height: 2em;
}
.red {
    color : red;
}
.hide {
    display: none;
}
/*隐藏悬浮菜单*/
.slideIn {
    transform : translate3d(202px, 0, 0);
    transition-duration : .5s;
}
/*显示悬浮菜单*/
.slideOut {
    transform : translate3d(0, 0, 0);
    transition-duration : .5s;
}
.static {
    color:#007aff;
    text-align: center;
}
/*显示悬浮球*/
.toShow {
    display: block;
        width: 4.8em;
        height: 2em;
        line-height: 2em;
        border-radius: .5em;
    border:1px solid gray;
    transform : translate3d(-5em, 0, 0);
    transition-duration : 1s;
}

(function(doc){
    //收集各章节的链接位置
     var pos = [],
         //收集菜单上的项目
         links = doc.getElementsByTagName('a'),
         //收集章节的标题
         titles = doc.getElementsByTagName('h1'),
         //悬浮菜单
         menu = doc.getElementById('menubar'),
         //当前选择项
         currentItem=null;
     //添加红色样式
     var addClass = function (element){
             currentItem && currentItem.removeAttribute('class');
             element.setAttribute('class','red');
             currentItem = element;
         },
         //网页被卷去的高:
        getScrollTop = function (){
            return Math.ceil(document.body.scrollTop)+1;
        },
         //计算滚动位置
        startScroll = function (){
            var scrollTop = getScrollTop(),
                len = titles.length,
                i = 0;
            //第一条
            if(scrollTop>=0 && scrollTop                 addClass(links[0]);
                return;
            }
            //最后一条
            if(scrollTop>=pos[len-1]){
                addClass(links[len-1]);
                return;
            }
            //中间
            for(;i                 if(scrollTop > pos[i] && scrollTop                     addClass(links[i]);
                    break;
                }
            }
    };
     //点击列表中的链接变色
     menu.onclick=function(e){
         var target = e.target || e.srcElement;
         if(target.nodeName.toLowerCase() === 'a'){
             //列表项状态指示
             addClass(target);
             return;
         }
         if(target.nodeName.toLowerCase() === 'p'){
             if(target.className == 'static'){
                 //隐藏菜单
                 this.className = 'menu slideIn';
                 setTimeout(function(){
                     target.className = 'static toShow';
                     target.innerHTML = '显示';
                 },1000);
             }else{
                 //显示菜单
                 target.className = 'static';
                 target.innerHTML = '隐藏';
                 this.className = 'menu slideOut';
             }
         }
     }
    //计算各章节的初始位置
    var ln = titles.length;
    while(--ln>-1){
        //titles[len].offsetParent.offsetTop = 0;
        pos.unshift(titles[ln].offsetTop);
    }
    startScroll();
    //监听滚动
    window.onscroll = function(){
          startScroll()
    }
})(document);