update: perfect animation, compatibility issue

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>