使用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');
}
版权声明:
作者:applek
链接:http://www.lovestu.com/jsmenu.html
文章版权归作者所有,未经允许请勿转载。
THE END