OC nav: adaptive — nav + mobile menu flip to dark frosted with light text over dark sections
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+14
@@ -252,6 +252,20 @@
|
||||
});
|
||||
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; }
|
||||
}
|
||||
nav.classList.toggle('on-dark', dark);
|
||||
if (menu) menu.classList.toggle('on-dark', dark);
|
||||
}
|
||||
updateNavTheme();
|
||||
window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true });
|
||||
window.addEventListener('resize', updateNavTheme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user