强迫症
发了第一篇翻译文档之后，觉得篇幅较长时不知道目前窗口处在文章的哪个章节，有点不方便，所以考虑加个自定义的导航。
经过搜索，发现之前已经有很多高手都做了自定义目录或者导航，于是我从大牛数据之巅的美化博客教程中扒来了代码。也学习了怎么自定义博客的样式和JS。感谢大牛！
修改
然后根据自己的想法，做了一些修改：
1. 原来代码是向下滚动固定高度后，显示导航。但是右边栏内容是动态的，所以这个固定的高度值不好设定，导航会挡到边栏内容，看起来不太舒服。所以改了一点，加载页面后根据边栏的实际高度设定导航出现的时机。
2. 增加了鼠标悬停的效果。
3. 增加了返回顶部的按钮。
4. 原代码固定显示2级目录，改了一下，当目录不长时，显示H2/H3/H4这3级标题，如果这样目录太长的话，就显示H2/H3。因为自定义的导航容器高度是固定的，太长有一些就不显示了。本来也想把导航内容也做成可以滚动的，但是有点小复杂。我是菜鸟，反正一般文章也不会太长，真要超出导航范围就分成两篇发，凑合着用吧，哈哈哈。
代码不太熟悉，写的不好的地方，大家请多指教！
实际完成之后效果如下：
效果图
修改后的JS代码
1 $(document).ready(function () { 2 toolbar = '<div id="sideToolbar" style="display:none;"> 3 <div class="sideCatalogBg" id="sideCatalog"> 4 <div id="sideCatalog-sidebar"> 5 <div class="sideCatalog-sidebar-top"> 6 </div> 7 <div class="sideCatalog-sidebar-bottom"> 8 </div> 9 </div> 10 <div id="sideCatalog-catalog"> 11 <ul class="nav" style="300px;zoom:1"> 12 </ul> 13 </div> 14 </div> 15 <a href="javascript:void(0);" id="sideCatalogBtn" class="sideCatalogBtnDisable"></a> 16 <a href="javascript:void(0);" id="sideToolbar-up"></a> 17 </div>', 18 catalog_item = '', 19 l = 1, m = 1, n = 1, 20 s = $('#cnblogs_post_body'); //#cnblogs_post_body是正文内容div 21 if (s.length === 0) { 22 return 23 } 24 ; 25 $('body').append(toolbar); 26 headers = s.find(':header'); //查找正文内所有标题 h1~h6 27 catalog_item += '<li><span style="font-size: 14pt; font-weight: bold;">本文目录</span></li>'; 28 headers.each(function () { //遍历所有的header 29 var xheader = $(this), //当前的header的对象 30 v = xheader[0]; 31 32 var text = xheader.text(); 33 34 xheader.attr('id', 'autoid-' + l + '-' + m + '-' + n) 35 36 if (v.localName === 'h2') { 37 level1 = l + '.'; 38 if (text.length > 26) text = text.substr(0, 26) + "..."; 39 catalog_item += '<li><a href="#' + xheader.attr('id') + '" title="' + text + '">' + l + ' ' + text + '</a><span class="sideCatalog-dot pointer"></span></li>'; 40 l++; 41 } else if (v.localName === 'h3') { 42 level2 = level1 + m + '.'; 43 if (text.length > 22) text = text.substr(0, 22) + "..."; 44 catalog_item += '<li class="h2Offset"><a href="#' + xheader.attr('id') + '" title="' + text + '">' + level1 + m + ' ' + text + '</a><span class="pointer"></span></li>'; 45 m++; 46 } else if (v.localName === 'h4') { 47 if (s.find('h2').length + s.find('h3').length + +s.find('h4').length < 17) { 48 if (text.length > 18) text = text.substr(0, 18) + "..."; 49 catalog_item += '<li class="h3Offset"><a href="#' + xheader.attr('id') + '" title="' + text + '">' + level2 + n + ' ' + text + '</a><span class="pointer"></span></li>'; 50 n++; 51 } 52 } 53 }); 54 $('#sideCatalog-catalog>ul.nav').html(catalog_item); 55 $('body').scrollspy({ 56 offset: 50, 57 target: '.sideCatalogBg' 58 }); 59 60 $('body').on('activate.bs.scrollspy', function () { 61 $("ul.nav li.active span").toggleClass("highlight") 62 }); 63 64 $sideCatelog = $('#sideCatalog'); 65 $('#sideCatalogBtn').on('click', function () { 66 if ($(this).hasClass('sideCatalogBtnDisable')) { 67 $sideCatelog.css('visibility', 'hidden') 68 } else { 69 $sideCatelog.css('visibility', 'visible') 70 } 71 $(this).toggleClass('sideCatalogBtnDisable'); 72 }); 73 74 75 $('#sideToolbar-up').on('click', function () { 76 $("html,body").animate({ 77 scrollTop: 0 78 }, 500) 79 }); 80 81 //希望在sidebar加载完后，在下方空白的地方才显示目录 82 //博客园的sidebar也是JS加载，测试时发现在其加载完之前，下面的sidebar_height就已经计算了，导致误差。所以加了延迟1秒 83 setTimeout(function () { 84 sidebar_height = $('#sideBarMain').height(); 85 $sideToolbar = $('#sideToolbar'); 86 $(document).on('scroll', function () { 87 var t = $(document).scrollTop(); 88 if (t > sidebar_height + 120) { 89 $sideToolbar.css('display', 'block') 90 } else { 91 $sideToolbar.css('display', 'none') 92 } 93 }) 94 }, 1000); 95 96 });
修改后的CSS
1 /*定义整个目录框架的大小*/ 2 #sideToolbar { 3 position: fixed; 4 bottom: -10px; /*距离页面底部的距离，不能设置过小，否则按钮看不到无法关闭*/ 5 right: 15px; 6 width: 300px; 7 height: 450px 8 } 9 10 #sideCatalog { 11 background-color: #fff; 12 padding-bottom: 10px; 13 border-radius: 5px; 14 } 15 16 #sideCatalog-sidebar { 17 -moz-border-bottom-colors: none; 18 -moz-border-left-colors: none; 19 -moz-border-right-colors: none; 20 -moz-border-top-colors: none; 21 background-color: #eaeaea; 22 /*border-color: -moz-use-text-color #eaeaea;*/ 23 border-image: none; 24 border-left: 1px solid #eaeaea; 25 border-right: 1px solid #eaeaea; 26 border-style: none solid; 27 border-width: 0 1px; 28 height: 353px; 29 left: 5px; 30 position: absolute; 31 top: 0; 32 width: 0 33 } 34 35 /*目录形成的范围*/ 36 #sideCatalog-catalog { 37 height: 325px; 38 padding-top: 18px; 39 overflow: hidden; 40 padding-left: 23px; 41 position: relative 42 } 43 44 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top { 45 cursor: pointer; 46 top: 0 47 } 48 49 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom { 50 bottom: 0 51 } 52 53 #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top, #sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom { 54 /*黑白圆圈*/ 55 background: url("sideToolbar.gif") no-repeat scroll 0 -199px transparent; 56 height: 10px; 57 left: -5px; 58 overflow: hidden; 59 position: absolute; 60 width: 10px 61 } 62 63 #sideCatalog li { 64 margin: 0px; 65 padding: 0 7px; 66 text-align: left; 67 position: relative 68 } 69 70 /*#sideCatalog li:hover {*/ 71 /*background-color: #f5f5f5*/ 72 /*}*/ 73 #sideCatalog-catalog ul .active { 74 background-color: #f5f5f5 75 } 76 77 #sideCatalog-catalog .active a { 78 color: #519cea 79 } 80 81 #sideCatalog-catalog a:hover { 82 background-color: transparent; 83 color: #519cea 84 } 85 86 #sideCatalog span:first-child { 87 color: #999; 88 font-family: Arial; 89 font-size: 14px; 90 font-weight: bold; 91 padding-right: 5px 92 } 93 94 /*这里比较重要，设置h2级别目录的缩进和左边距*/ 95 #sideCatalog li.h2Offset { 96 padding-left: 45px; 97 text-indent: -25px 98 } 99 100 /*这里比较重要，设置h3级别目录的缩进和左边距*/ 101 #sideCatalog li.h3Offset { 102 padding-left: 90px; 103 text-indent: -50px 104 } 105 106 #sideCatalog a { 107 text-decoration: none; 108 color: #555; 109 font-weight: bold 110 } 111 112 .sideCatalog-dot { 113 /*黑色圆点*/ 114 background: url("sideToolbar.gif") repeat scroll 0 -222px transparent; 115 cursor: pointer; 116 font-size: 12px; 117 height: 10px; 118 left: -20px; 119 line-height: 12px; 120 overflow: hidden; 121 position: absolute; 122 top: 4px; 123 width: 6px 124 } 125 126 #sideCatalogBtn { 127 /*按钮初始状态*/ 128 background: url("sideToolbar.gif") no-repeat scroll 0 0 transparent; 129 border-radius: 2px; 130 cursor: pointer; 131 display: inline-block; 132 height: 45px; 133 margin-bottom: 5px; 134 margin-left: 10px; 135 position: relative; 136 width: 45px; 137 margin-top: 2px; 138 outline: 0; 139 vertical-align: top; 140 } 141 142 #sideCatalogBtn:link :visited { 143 /*按钮悬停*/ 144 background: url("sideToolbar.gif") no-repeat scroll -53px 0 transparent 145 } 146 147 #sideCatalogBtn:hover { 148 /*按钮悬停*/ 149 background: url("sideToolbar.gif") no-repeat scroll -154px 0 transparent 150 } 151 152 .sideCatalogBtnDisable { 153 /*菜单收起时的按钮*/ 154 background: url("sideToolbar.gif") no-repeat scroll -104px 0 transparent !important 155 } 156 157 #sideToolbar-up { 158 /*返回顶部按钮*/ 159 background: url("sideToolbar.gif") no-repeat scroll -1px -62px transparent; 160 border-radius: 2px; 161 display: inline-block; 162 height: 45px; 163 margin-left: 0; 164 width: 45px; 165 position: relative; 166 margin-top: 2px; 167 outline: 0; 168 vertical-align: top; 169 } 170 171 #sideToolbar-up:hover { 172 /*返回顶部按钮悬停*/ 173 background: url("sideToolbar.gif") no-repeat scroll -74px -62px transparent; 174 }