OC nav flip: independent per-area detection (bar + menu read their own bg, re-check on open) + fade transitions

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 10:52:13 -07:00
parent 3267a6e8cc
commit fcfbfd8817
2 changed files with 20 additions and 11 deletions
+14 -7
View File
@@ -249,19 +249,26 @@
toggle.classList.toggle('open', open);
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
updateNavTheme();
});
for (var a of menu.querySelectorAll('a')) { a.addEventListener('click', closeMenu); }
}
var nav = document.getElementById('nav');
var sections = Array.prototype.slice.call(document.querySelectorAll('[data-bg]'));
function updateNavTheme() {
var dark = false;
for (var s of sections) {
var r = s.getBoundingClientRect();
if (r.top <= 30 && r.bottom > 30) { dark = (s.dataset.bg === 'dark'); break; }
function darkBehind(y) {
for (var i = 0; i < sections.length; i++) {
var r = sections[i].getBoundingClientRect();
if (r.top <= y && r.bottom > y) return sections[i].dataset.bg === 'dark';
}
return false;
}
function updateNavTheme() {
var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
if (menu && menu.classList.contains('open')) {
var mr = menu.getBoundingClientRect();
menu.classList.toggle('on-dark', darkBehind((mr.top + mr.bottom) / 2));
}
nav.classList.toggle('on-dark', dark);
if (menu) menu.classList.toggle('on-dark', dark);
}
updateNavTheme();
window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true });