fix TOC scrolling

Author: viperML

src/scripts/toc.ts

@@ -12,14 +12,21 @@ document.addEventListener("astro:page-load", () => {
 function doToc(toc: HTMLElement) {
     const titles = new Map();
 
-    Array.from(toc.children).forEach(node => {
+    // ugly hack :^)
+    // reverse children, so priority is for the last visible TOC element
+    // but push first element so it takes priority over the 2nd element
+    const toc_children = Array.from(toc.children);
+    // @ts-expect-error The TOC will always have >1 elements
+    toc_children.push(toc_children[0])
+    toc_children.reverse();
+
+    toc_children.forEach(node => {
         if (!(node instanceof HTMLElement)) {
             return;
         }
 
         const slug = node.dataset.slug;
-        if (slug === undefined) {return;}
-
+        if (slug === undefined) { return; }
 
         titles.set(slug, false);
     })
@@ -63,22 +70,25 @@ function doToc(toc: HTMLElement) {
             }
 
             const slug = entry.target.dataset.headingId;
+            // console.log(slug, entry.isIntersecting, entry.intersectionRatio);
+
             if (slug === undefined) {
                 return;
             }
 
             titles.set(slug, entry.isIntersecting);
+            // console.log(titles);
 
 
             updateTitles();
         })
     }, {
-        threshold: 0.9,
+        threshold: [0, 0.25, 0.5, 0.75, 1],
     });
 
     titles.forEach((_, slug) => {
         const section = document.querySelectorAll(`[data-heading-id="${slug}"]`)[0];
-        if (section === undefined) {return;}
+        if (section === undefined) { return; }
 
         observer.observe(section);
     });