header flackern fixed

gfi-ihk-2024/stories/components/header/header.js

@@ -81,29 +81,52 @@ class IHKHeader {
   initScroll() {
     const t = this;
 
+    // State Machine für Scroll-Verhalten
+    t.scrollState = {
+      current: 'top', // 'top', 'scrolling-down', 'scrolled', 'scrolling-up'
+      lastPosition: 0,
+      transitioning: false
+    };
+
     window.addEventListener("scroll", function () {
+      if (t.scrollState.transitioning) return;
+
       window.requestAnimationFrame(function () {
-        t.checkScroll();
-      })
+        t.checkScrollWithStateMachine();
+      });
     }, {passive: true});
-  };
+  }
 
-  checkScroll() {
+  checkScrollWithStateMachine() {
     const t = this;
     const st = this.window.scrollTop();
+    const state = t.scrollState;
 
     if (t.overlayOpen || $('.gallery-popup.open').length) {
       return false;
     }
 
-    if (st > 59) {
-      this.header.addClass('scrolled');
-      this.body.addClass('header-scrolled');
-    } else {
-      this.header.removeClass('scrolled');
-      this.body.removeClass('header-scrolled');
+    const delta = st - state.lastPosition;
+    const isScrollingDown = delta > 0;
+    const isScrollingUp = delta < 0;
+
+    switch (state.current) {
+      case 'top':
+        if (st > 100 && isScrollingDown) {
+          t.transitionTo('scrolled');
+        }
+        break;
+
+      case 'scrolled':
+        if (st < 30 && isScrollingUp) {
+          t.transitionTo('top');
+        }
+        break;
     }
 
+    state.lastPosition = st;
+
+    // Toplink logic
     if (st > this.window.height() * 1.2) {
       this.header.addClass('show-toplink');
     } else {
@@ -111,6 +134,26 @@ class IHKHeader {
     }
   }
 
+  transitionTo(newState) {
+    const t = this;
+    t.scrollState.transitioning = true;
+
+    if (newState === 'scrolled') {
+      this.header.addClass('scrolled');
+      this.body.addClass('header-scrolled');
+    } else if (newState === 'top') {
+      this.header.removeClass('scrolled');
+      this.body.removeClass('header-scrolled');
+    }
+
+    t.scrollState.current = newState;
+
+    // Transition Lock
+    setTimeout(() => {
+      t.scrollState.transitioning = false;
+    }, 150);
+  }
+
   initToggling() {
     this.header.find('.overlay-holder').on('click touch', this.toggleNavigation.bind(this));
     this.header.find('.toggle-nav').on('click touch', this.toggleNavigation.bind(this));