diff --git a/src/components/sidebarTableOfContents/index.tsx b/src/components/sidebarTableOfContents/index.tsx
index 3a55c069a61c86..5b1cf579883931 100644
--- a/src/components/sidebarTableOfContents/index.tsx
+++ b/src/components/sidebarTableOfContents/index.tsx
@@ -157,16 +157,17 @@ export function SidebarTableOfContents() {
 
   // Mark the active item based on the scroll position
   useEffect(() => {
-    if (!tocItems.length) {
+    const innerHeight = window.innerHeight;
+    if (!tocItems.length || !innerHeight) {
       return () => {};
     }
     // account for the header height
     const rootMarginTop = 100;
     // element is consiered in view if it is in the top 1/3 of the screen
-    const rootMarginBottomRaw = (2 / 3) * window.innerHeight - rootMarginTop;
-    const rootMarginBottom = Math.floor(rootMarginBottomRaw);
+    const rootMarginBottomRaw = (2 / 3) * innerHeight - rootMarginTop;
+    const rootMarginBottom = Math.floor(rootMarginBottomRaw) * -1;
     const observerOptions = {
-      rootMargin: `${rootMarginTop}px 0px -${rootMarginBottom}px 0px`,
+      rootMargin: `${rootMarginTop}px 0px ${rootMarginBottom}px 0px`,
       threshold: 1,
     };
     const observer = new IntersectionObserver(entries => {
@@ -183,7 +184,7 @@ export function SidebarTableOfContents() {
     }, observerOptions);
     const headings = tocItems.map(item => item.element);
     headings.forEach(heading => observer.observe(heading));
-    return () => headings.forEach(heading => observer.unobserve(heading));
+    return () => observer.disconnect();
   }, [tocItems]);
 
   return (