summaryrefslogtreecommitdiff
path: root/_includes/sidebar
diff options
context:
space:
mode:
authorJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-24 14:10:57 +0800
committerJeffrey Tse <jeffreytse.mail@gmail.com>2019-09-24 14:10:57 +0800
commitcda49e03018d3dbbe8b9dc3927719471150c1608 (patch)
treea94523d13898c106c90e4d9285cf6136d45b7a33 /_includes/sidebar
parent92840887d2591d8ba9b92074e193ef1a922c118d (diff)
update: perfect animation, compatibility issue
Diffstat (limited to '_includes/sidebar')
-rw-r--r--_includes/sidebar/article-menu.html77
1 files changed, 39 insertions, 38 deletions
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
index aa4184d..7f83160 100644
--- a/_includes/sidebar/article-menu.html
+++ b/_includes/sidebar/article-menu.html
@@ -12,48 +12,49 @@
</div>
<script>
- var menu = document.querySelector(".post-menu .post-menu-content");
- var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
+ function generateContent() {
+ 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>');
- });
+ // 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>');
+ }
- menu.innerHTML = '<ul>' + menuHTML + '</ul>';
+ menu.innerHTML = '<ul>' + menuHTML + '</ul>';
- // The anchor offsetHeight
- var headerHeight = 0;
- var header = document.querySelector('header');
- if (header) {
- offsetHeight = header.offsetHeight + 12;
- }
+ // The header element
+ var header = document.querySelector('header.site-header');
- // 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;
+ // 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();
+ var headerHeight = header.offsetTop + header.offsetHeight + 20;
+ if (clientRect.top <= headerHeight) {
+ 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;
}
- break;
}
- }
- if (lastActive && changed) {
- lastActive.classList.remove('active');
- }
- event.preventDefault();
- });
+ if (lastActive && changed) {
+ lastActive.classList.remove('active');
+ }
+ event.preventDefault();
+ });
+ }
+ generateContent();
</script>