skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-18 17:16:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix section-nav using wrong positions for nested sections

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-13 16:14:51 -07:00
co-authored by Claude Opus 4.6
parent 830fe8e5fc
commit 5fee3148be
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/section-nav.js
+10 -4
View File
@@ -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);
}
});