使用JS为网页制作菜单

corepress主题，在文章中允许显示菜单，如图。

并且点击标题能实现跳转到文章指定的标题位置，同时文章目录菜单的标题会显示当前标题颜色

下面记录一下如何制作的。

枚举标题

通过JQuery，枚举文章内容中的h2标签，并且给标签打上自定义熟属性。

并且，给目录面板生成目录标题

 $(".post-content h2").each(function () {
            $(this).attr('catalog', 'catalog-h2-' + i);
            $('#post-catalog-list').append('<p catalog="' + 'catalog-h2-' + i + '" class="catalog-item" onclick="go_catalog(' + "'catalog-h2-" + i + "'" + ')">' + $(this).text() + '</p>');
            i++;
        });

点击目录p标签，执行指定方法go_catalog，方法如下

本方法通过查询文章自定义属性的标题，并且获取标题在文章中的位置，通过animate方法，实现滚动条移动

    function go_catalog(catalogname) {
        var _scrolltop = $('h2[catalog=' + catalogname + ']').offset().top;
        $('html, body').animate({
                scrollTop: _scrolltop - 60
            }, 500
        );
    }

实现选中颜色

上述代码已经能实现文章跳转了，非常简单，如何实现对应文章目录着色比较麻烦。

滚动的时候，浏览器有滚动事件，我们可以通过判断第一个元素是否在可视区域内，来实现颜色作色。

下面代码实现了作色功能，首先执行set_catalog_css方法，去除链接所有选中颜色。

然后再浏览器滚动事件中，判断第一个标签第一个是否在一个区域内，只要在0-160中，说明已经滚动到了标题位置，进行修改css作色

$(document).scroll(function () {
        if ($('#post-catalog').css('visibility') != 'visible') {
            return;//判断目录面板是否可视，不可视则不执行下方代码，免得浪费性能
        }
        $(".post-content h2[catalog]").each(function () {
            var el_y = this.getBoundingClientRect().y;
            if (el_y < 160 && el_y > 0) {
                var name = $(this).attr('catalog');
                set_catalog_css();
                $('p[catalog=' + name + ']').css('color', ' var(--MaincolorHover)');
                return;
            }

        });
    });
    function set_catalog_css() {
        $('p[catalog]').css('color', 'unset');
    }