From 5fee3148be291e244608e881413056d078fc0584 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 16:14:51 -0700 Subject: [PATCH] Fix section-nav using wrong positions for nested sections The changelog and FAQ sections are inside a positioned .changelog-faq-row wrapper, so their offsetTop was 0 (relative to parent) instead of their actual document position. This broke current-section detection and caused both pills to appear permanently active. Use getBoundingClientRect() instead, which returns correct absolute positions regardless of nesting. Co-Authored-By: Claude Opus 4.6 (1M context) --- public/js/components/section-nav.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/public/js/components/section-nav.js b/public/js/components/section-nav.js index e34039387..0c182f6ff 100644 --- a/public/js/components/section-nav.js +++ b/public/js/components/section-nav.js @@ -17,10 +17,16 @@ export function initSectionNav() { let ticking = false; + // Returns the element's top position relative to the document, + // which works even when the element is inside a positioned parent. + function docTop(el) { + return el.getBoundingClientRect().top + window.scrollY; + } + function updateNav() { const scrollY = window.scrollY; const heroBottom = hero.offsetTop + hero.offsetHeight - 100; - const footerTop = footer ? footer.offsetTop : Infinity; + const footerTop = footer ? docTop(footer) : Infinity; const viewportBottom = scrollY + window.innerHeight; // Show nav after hero, hide when footer is visible @@ -36,7 +42,7 @@ export function initSectionNav() { for (let i = sectionIds.length - 1; i >= 0; i--) { const section = document.getElementById(sectionIds[i]); - if (section && section.offsetTop <= viewportMiddle) { + if (section && docTop(section) <= viewportMiddle) { currentSection = sectionIds[i]; break; } @@ -47,10 +53,10 @@ export function initSectionNav() { const activeSections = new Set(); if (currentSection) { const currentEl = document.getElementById(currentSection); - const currentTop = currentEl?.offsetTop ?? 0; + const currentTop = currentEl ? docTop(currentEl) : 0; sectionIds.forEach(id => { const el = document.getElementById(id); - if (el && Math.abs(el.offsetTop - currentTop) < 4) { + if (el && Math.abs(docTop(el) - currentTop) < 4) { activeSections.add(id); } });