60 lines
1.6 KiB
HTML
60 lines
1.6 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>
|
||
|
|
var menu = document.querySelector(".post-menu .post-menu-content");
|
||
|
|
var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
|
||
|
|
|
||
|
|
// Generate post menu
|
||
|
|
var menuHTML = '';
|
||
|
|
headings.forEach(function (h) {
|
||
|
|
menuHTML += (
|
||
|
|
'<li class="h-' + h.tagName.toLowerCase() + '">'
|
||
|
|
+ '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
|
||
|
|
});
|
||
|
|
|
||
|
|
menu.innerHTML = '<ul>' + menuHTML + '</ul>';
|
||
|
|
|
||
|
|
// The anchor offsetHeight
|
||
|
|
var headerHeight = 0;
|
||
|
|
var header = document.querySelector('header');
|
||
|
|
if (header) {
|
||
|
|
offsetHeight = header.offsetHeight + 12;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Active the menu item
|
||
|
|
window.addEventListener('scroll', function (event) {
|
||
|
|
var lastActive = menu.querySelector('.active');
|
||
|
|
var changed = true;
|
||
|
|
for (var i = headings.length - 1; i >= 0; i--) {
|
||
|
|
var h = headings[i];
|
||
|
|
var clientRect = h.getBoundingClientRect();
|
||
|
|
if (clientRect.top < offsetHeight) {
|
||
|
|
var id = 'h-' + h.getAttribute('id');
|
||
|
|
var curActive = menu.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();
|
||
|
|
});
|
||
|
|
</script>
|