吕滔博客

原始html如下

<div id="wrapper">
<h1>x</h1>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
</div>

核心js代码

  var sideBar = document.getElementById('sideBar');
  var sideBar_title = document.getElementById('sideBar_title');
  var siderBar_contents = document.getElementById('siderBar_contents');
  sideBar.onmouseover = function(){
    siderBar_contents.style.display = 'block';
  };
  sideBar.onmouseout = function(){
    siderBar_contents.style.display = 'none';
  };
  var h_list = document.querySelectorAll('#wrapper h1,h2,h3,h4,h5');
  var str='<dl>';
  if(h_list.length==3){
    sideBar_title.style.display = 'none';
  }
  for(var i=0; i< h_list.length;i++){
    if(h_list[i].nodeName.toLocaleLowerCase()=='h2'){
      str +='<dt><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dt>';
    }else{
      str +='<dd><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dd>';
    }
    h_list[i].id = i;
  }
  str+='</dl>';
  siderBar_contents.innerHTML=str;

css代码

#sideBar{position:fixed;right:0;top:10px;width:auto;height:auto;z-index:999;cursor:pointer}
#sideBar_title{float:right;width:30px;text-align:center;font-weight:bold;color:white;font-size:18px;background-color:#ff3c73}
#siderBar_contents{float:left;padding:0 10px;margin-left:10px;min-width:100px;height:520px;background-color:#ff3c73;opacity:0.9;font-size:16px;color:white;line-height:1.5em;overflow:auto;border-radius:10px 0 10px 10px}
#siderBar_contents a{color:white;font-size:14px;text-decoration:none}
#siderBar_contents a:hover{text-decoration:underline}

根据自己需要再调整

最终样式