active toc link while scrolling

assets/css/common/post-single.css

@@ -270,6 +270,7 @@
         top: 100px;
         width: 300px;
         font-size: .9em;
+        z-index: 1;
     }
 }
 
@@ -295,6 +296,9 @@
 .toc li ul {
     margin-inline-start: var(--gap);
 }
+.toc li a.active {
+    text-decoration: underline;
+}
 
 .toc summary:focus {
     outline: 0;

layouts/partials/footer.html

@@ -133,3 +133,52 @@
     });
 </script>
 {{- end }}
+
+{{- if (and (eq .Kind "page") (.Param "ShowToc") (.Param "TocSide")) }}
+<script>
+window.addEventListener('DOMContentLoaded', function (event) {
+  const headings = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id]');
+
+  // 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');
+
+  window.addEventListener('scroll', () => {
+    const passedHeadings = [];
+    for (const h of headings) {
+      // 5 px as a buffer
+      if (getOffsetTop(h) < 5) {
+        passedHeadings.push(h)
+      } else {
+        break;
+      }
+    }
+    if (passedHeadings.length > 0) {
+      activeHeading = passedHeadings[passedHeadings.length - 1];
+    }
+
+    headings.forEach(heading => {
+      if (heading === activeHeading) {
+        getLinkByHeading(heading).classList.add('active');
+      } else {
+        getLinkByHeading(heading).classList.remove('active');
+      }
+    })
+  }, false);
+
+  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>
+{{- end }}