scroll spy to highlight TOC as you scroll

Author: mscoutermarsh

_layouts/default.html

@@ -194,7 +194,6 @@ <h2 class="text-delta">Table of contents</h2>
 
   <script src="/assets/js/clipboard.min.js"></script>
   <script>
-    // Add copy buttons to code blocks
     document.addEventListener('DOMContentLoaded', function() {
       document.querySelectorAll('.highlight').forEach(function(block) {
         var btn = document.createElement('button');
@@ -211,6 +210,46 @@ <h2 class="text-delta">Table of contents</h2>
         block.appendChild(btn);
       });
     });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const tocLinks = document.querySelectorAll('.toc-sidebar .toc-link');
+      if (tocLinks.length === 0) return;
+
+      const headingIds = Array.from(tocLinks).map(link => {
+        const href = link.getAttribute('href');
+        return href ? href.substring(1) : null;
+      }).filter(Boolean);
+
+      const headings = headingIds.map(id => document.getElementById(id)).filter(Boolean);
+      if (headings.length === 0) return;
+
+      function updateActiveSection() {
+        const scrollPos = window.scrollY + 100;
+        
+        let currentSection = null;
+        
+        headings.forEach(function(heading) {
+          if (heading.offsetTop <= scrollPos) {
+            currentSection = heading.id;
+          }
+        });
+
+        tocLinks.forEach(function(link) {
+          link.classList.remove('toc-active');
+        });
+
+        if (currentSection) {
+          const activeLink = document.querySelector('.toc-sidebar .toc-link[href="#' + currentSection + '"]');
+          if (activeLink) {
+            activeLink.classList.add('toc-active');
+          }
+        }
+      }
+
+      window.addEventListener('scroll', updateActiveSection);
+      
+      updateActiveSection();
+    });
   </script>
 </body>
 </html>

_sass/custom/custom.scss

@@ -362,18 +362,31 @@ img {
   text-decoration: none;
   border-left: 2px solid transparent;
   margin-left: -1px;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: color 0.15s ease, border-color 0.15s ease, font-weight 0.15s ease;
 
   &:hover {
     color: $link-color;
     border-left-color: $grey-lt-100;
   }
+  
+  // Active state for scroll-spy
+  &.toc-active {
+    color: $link-color !important;
+    border-left-color: $link-color !important;
+    font-weight: 600;
+    background-color: rgba($link-color, 0.08);
+  }
 }
 
 .toc-h3 .toc-link {
   padding-left: 1.25rem;
   font-size: 0.75rem;
   color: $grey-dk-000;
+  
+  &.toc-active {
+    color: $link-color;
+    font-weight: 600;
+  }
 }
 
 .toc-sublist {