diff --git a/partials/structure/nav.php b/partials/structure/nav.php index 48ba799..fd53664 100644 --- a/partials/structure/nav.php +++ b/partials/structure/nav.php @@ -49,3 +49,4 @@ $isDebug = defined('APP_DEBUG') && APP_DEBUG === true; + diff --git a/public/assets/css/app.css b/public/assets/css/app.css index b220736..e61f39b 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -37,6 +37,7 @@ body { .site-header.is-scrolled .nav-row { padding: 10px 0; } .site-header.is-scrolled .brand__logo { width: 46px; height: 46px; } .site-header.is-scrolled .brand__name { font-size: 17px; } +.header-sentinel { display:block; width:100%; height:1px; pointer-events:none; } .nav-links { display: flex; diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 33e8047..3e396ad 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', () => { const isLoggedIn = body.dataset.auth === '1'; const childGender = body.dataset.childGender || ''; const header = document.querySelector('.site-header'); + const headerSentinel = document.getElementById('headerSentinel'); // Logo-Logik const pickLogo = (gender) => { @@ -15,28 +16,22 @@ document.addEventListener('DOMContentLoaded', () => { img.src = `/assets/bilder/${chosenLogo}`; }); - // Header shrink on scroll with hysteresis to avoid flicker - let ticking = false; - let isShrunk = false; - const SHRINK_ON = 140; - const SHRINK_OFF = 90; - const onScroll = () => { - if (ticking || !header) return; - ticking = true; - window.requestAnimationFrame(() => { - const y = window.scrollY; - if (!isShrunk && y > SHRINK_ON) { - isShrunk = true; - header.classList.add('is-scrolled'); - } else if (isShrunk && y < SHRINK_OFF) { - isShrunk = false; - header.classList.remove('is-scrolled'); - } - ticking = false; + // Header shrink via IntersectionObserver (no flicker around threshold) + if (header && headerSentinel && 'IntersectionObserver' in window) { + const observer = new IntersectionObserver(([entry]) => { + header.classList.toggle('is-scrolled', !entry.isIntersecting); + }, { + rootMargin: '-1px 0px 0px 0px', + threshold: 0, }); - }; - onScroll(); - window.addEventListener('scroll', onScroll, { passive: true }); + observer.observe(headerSentinel); + } else if (header) { + // Fallback with simple threshold + const limit = 120; + const onScroll = () => header.classList.toggle('is-scrolled', window.scrollY > limit); + onScroll(); + window.addEventListener('scroll', onScroll, { passive: true }); + } // Mobile MenĂ¼ const mobileMenu = document.getElementById('mobileMenu');