From 829bb016914e55405c56c3c2a0d5488c1a02ecae Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Sun, 10 Apr 2022 01:19:23 +0800
Subject: [PATCH] enhance toc scroll algorithm

---
 layouts/partials/footer.html | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d533987..f5f04cf 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -138,14 +138,11 @@
 <script>
 window.addEventListener('DOMContentLoaded', function (event) {
   const headings = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id]');
+  const activeClass = 'active';
 
   // Make the first header active
   let activeHeading = headings[0];
-  function getLinkByHeading(heading) {
-    const id = encodeURI(heading.getAttribute('id')).toLowerCase();
-    return document.querySelector(`.toc ul li a[href="#${id}"]`);
-  }
-  getLinkByHeading(activeHeading).classList.add('active');
+  getLinkByHeading(activeHeading).classList.add(activeClass);
 
   window.addEventListener('scroll', () => {
     const passedHeadings = [];
@@ -158,26 +155,28 @@ window.addEventListener('DOMContentLoaded', function (event) {
       }
     }
     if (passedHeadings.length > 0) {
-      activeHeading = passedHeadings[passedHeadings.length - 1];
+      newActiveHeading = passedHeadings[passedHeadings.length - 1];
+    } else {
+      newActiveHeading = headings[0];
+    }
+    if (activeHeading != newActiveHeading) {
+      getLinkByHeading(activeHeading).classList.remove(activeClass);
+      activeHeading = newActiveHeading;
+      getLinkByHeading(activeHeading).classList.add(activeClass);
     }
-
-    headings.forEach(heading => {
-      if (heading === activeHeading) {
-        getLinkByHeading(heading).classList.add('active');
-      } else {
-        getLinkByHeading(heading).classList.remove('active');
-      }
-    })
   }, false);
 
+  function getLinkByHeading(heading) {
+    const id = encodeURI(heading.getAttribute('id')).toLowerCase();
+    return document.querySelector(`.toc ul li a[href="#${id}"]`);
+  }
+
   function getOffsetTop(heading) {
     if (!heading.getClientRects().length) {
       return 0;
     }
     let rect = heading.getBoundingClientRect();
     return rect.top
-    // let win = heading.ownerDocument.defaultView;
-    // return rect.top + win.pageYOffset;
   }
 }, false);
 </script>