corepress主題，在文章中允許顯示菜單，如圖。
并且點擊標(biāo)題能實現(xiàn)跳轉(zhuǎn)到文章指定的標(biāo)題位置，同時文章目錄菜單的標(biāo)題會顯示當(dāng)前標(biāo)題顏色
下面記錄一下如何制作的。
枚舉標(biāo)題
通過JQuery，枚舉文章內(nèi)容中的h2標(biāo)簽，并且給標(biāo)簽打上自定義熟屬性。
并且，給目錄面板生成目錄標(biāo)題
$(".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標(biāo)簽，執(zhí)行指定方法go_catalog，方法如下
本方法通過查詢文章自定義屬性的標(biāo)題，并且獲取標(biāo)題在文章中的位置，通過animate方法，實現(xiàn)滾動條移動
function go_catalog(catalogname) {
var _scrolltop = $('h2[catalog=' + catalogname + ']').offset().top;
$('html, body').animate({
scrollTop: _scrolltop - 60
}, 500
);
}實現(xiàn)選中顏色
上述代碼已經(jīng)能實現(xiàn)文章跳轉(zhuǎn)了，非常簡單，如何實現(xiàn)對應(yīng)文章目錄著色比較麻煩。
滾動的時候，瀏覽器有滾動事件，我們可以通過判斷第一個元素是否在可視區(qū)域內(nèi)，來實現(xiàn)顏色作色。
下面代碼實現(xiàn)了作色功能，首先執(zhí)行set_catalog_css方法，去除鏈接所有選中顏色。
然后再瀏覽器滾動事件中，判斷第一個標(biāo)簽第一個是否在一個區(qū)域內(nèi)，只要在0-160中，說明已經(jīng)滾動到了標(biāo)題位置，進行修改css作色
$(document).scroll(function () {
if ($('#post-catalog').css('visibility') != 'visible') {
return;//判斷目錄面板是否可視，不可視則不執(zhí)行下方代碼，免得浪費性能
}
$(".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');
}
