ycyxc

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;

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');