70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<style type="text/css" media="screen">
|
|
.post-menu ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="post-menu">
|
|
<div class="post-menu-title">Contents</div>
|
|
<div class="post-menu-content"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function generateContent() {
|
|
var menu = document.querySelector(".post-menu");
|
|
var menuContent = menu.querySelector(".post-menu-content");
|
|
var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
|
|
|
|
// Hide menu when no headings
|
|
if (headings.length === 0) {
|
|
return menu.style.display = "none";
|
|
}
|
|
|
|
// Generate post menu
|
|
var menuHTML = '';
|
|
for (var i = 0; i < headings.length; i++) {
|
|
var h = headings[i];
|
|
menuHTML += (
|
|
'<li class="h-' + h.tagName.toLowerCase() + '">'
|
|
+ '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
|
|
}
|
|
|
|
menuContent.innerHTML = '<ul>' + menuHTML + '</ul>';
|
|
|
|
// The header element
|
|
var header = document.querySelector('header.site-header');
|
|
|
|
// Active the menu item
|
|
window.addEventListener('scroll', function (event) {
|
|
var lastActive = menuContent.querySelector('.active');
|
|
var changed = true;
|
|
for (var i = headings.length - 1; i >= 0; i--) {
|
|
var h = headings[i];
|
|
var headingRect = h.getBoundingClientRect();
|
|
var headerRect = header.getBoundingClientRect();
|
|
var headerTop = Math.floor(headerRect.top);
|
|
var headerHeight = Math.floor(headerRect.height);
|
|
var headerHeight = headerTop + headerHeight + 20;
|
|
if (headingRect.top <= headerHeight) {
|
|
var id = 'h-' + h.getAttribute('id');
|
|
var curActive = menuContent.querySelector('a[href="#' + id + '"]');
|
|
if (curActive) {
|
|
curActive.classList.add('active');
|
|
}
|
|
if (lastActive == curActive) {
|
|
changed = false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
if (lastActive && changed) {
|
|
lastActive.classList.remove('active');
|
|
}
|
|
event.preventDefault();
|
|
});
|
|
}
|
|
generateContent();
|
|
</script>
|