准备工作

1.申请 JS 权限

获取目录数据，添加目录都需要用到 JS 操作，在设置内即可申请

2.布局分析

2.1 目录控件要放入的目标位置在 #sideBarMain 里的第一个子元素前

2.2 文章内容全部容纳在 #cnblogs_post_body 元素中

不同主题布局不同，仅以 SimpleMemory 主题为例

实操

1.JavaScript 代码（粘入 设置->博客侧边栏公告 即可）

    <script>
        // 获取数据
        var post_details = document.getElementById("cnblogs_post_body").children;
        var catalog_data = [];
        for (var i = 0; i < post_details.length; i++) {
            if (/^H\d$/.test(post_details[i].nodeName)) {
                catalog_data.push({
                    // 标题标签的级别
                    type: post_details[i].nodeName,
                    // 博客园会自动去除h标签中特殊符号后当作该标签的id，保存以用作锚点
                    id: post_details[i].id,
                    // 内容
                    str: post_details[i].innerHTML
                });
            }
        }
        // 创建目录控件
        var catalog_ele = document.createElement("div");
        catalog_ele.id = "my-catalog";
        // 拼接目录内容
        var catalog_html = '<h3 class="catListTitle">目录</h3><ul>';
        for (var i = 0; i < catalog_data.length && catalog_data[i].type < "H5"; i++) { //H5及以上标题不显示
            catalog_html += '<li class="catalog-' + catalog_data[i].type + //设置不同类名
                '"><a href="#' + catalog_data[i].id + //设置锚点
                '">' + catalog_data[i].str + '</a></li>'; //显示内容
        }
        catalog_html += '</ul>';
        catalog_ele.innerHTML = catalog_html;
        // 插入目录
        var side_bar_main = document.getElementById("sideBarMain");
        side_bar_main.insertBefore(catalog_ele, side_bar_main.children[0]);
        /**********************************************
         *此处已可实现静态位置的目录生成及点击跳转
         *下方剩余代码为实现随页面滚动改变catalog的定位
         *********************************************/
        function getAbsoluteTop(node) {
            var top = 0;
            do {
                top += node.offsetTop;
                node = node.offsetParent;
            } while (node);
            return top;
        }
        var catalog_ul_ele = catalog_ele.children[1];
        var catalog_ul_top = getAbsoluteTop(catalog_ul_ele);
        onscroll = function () {
            var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
            if (scroll_top > catalog_ul_top) {
                catalog_ul_ele.style.position = "relative";
                catalog_ul_ele.style.top = scroll_top - catalog_ul_top + "px";
            } else {
                catalog_ul_ele.style.position = "static";
            }
        }
    </script>

2.设置 CSS 代码（粘入 设置->页面定制 CSS 代码 即可）

        @media screen and (max-width: 767px) {
            #my-catalog {
                display: none;
            }
        }

        @media screen and (min-width: 768px) {
            #my-catalog {
                display: block;
            }
        }

        #sideBar {
            overflow: visible;
        }

        #my-catalog ul {
            background-color: #fff;
            border: 1px solid #ededed;
            padding: 5px 15px 15px 5px;
            z-index: 999;
        }

        #my-catalog ul li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #my-catalog ul li a:hover {
            text-decoration: none;
        }

        #my-catalog ul .catalog-H2 {
            padding-left: 10px;
            margin-top: 5px;
        }

        #my-catalog ul .catalog-H3 {
            padding-left: 20px;
        }

        #my-catalog ul .catalog-H4 {
            padding-left: 30px;
        }

3.效果如右

仅在浏览器宽度 大于767px 时显示目录