#1252 sticky header when scroll up show scroll down hide

README.md

@@ -5,7 +5,7 @@ Wordpress-Theme für zentrale Einrichtungen der Friedrich-Alexander-Universität
 ## Version
 
 
-Version: 2.3.34-203
+Version: 2.3.34-209
 
 
 

package.json

@@ -2,7 +2,7 @@
     "name": "FAU-Einrichtungen",
     "textdomain": "fau",
 
-    "version": "2.3.34-208",
+    "version": "2.3.34-209",
 
     "keywords": [
         "WordPress",

src/js/main/main.js

@@ -449,6 +449,43 @@ $html.removeClass('no-js').addClass('js');
             $('.meta-search .searchform input[type="text"]').toggleClass('active');
         });
 
+
+
+        //scroll up hide show headder
+
+
+    let lastScrollTop = 0;
+
+    window.addEventListener("scroll", function() {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        let header = document.getElementById('headerwrapper'); // Cache the element for performance
+
+        // If the user is at the very top of the page
+        if (scrollTop === 0) {
+            header.style.position = "static";
+            header.style.top = "auto";  // Reset the top property
+        }
+        // If scrolling up and current scroll position is not at the very top
+        else if (scrollTop < lastScrollTop) {
+            header.style.top = "0";
+            header.style.position = "fixed";
+        } 
+        // If scrolled down more than 150px
+        else if (scrollTop < 250) {
+            header.style.top = "0";
+            header.style.position = "static";
+
+        } 
+        // If it's within the first 150px while scrolling down
+        else {
+            header.style.top = "-100%";
+            header.style.position = "fixed";
+        }
+
+        lastScrollTop = scrollTop;
+    });
+
+
     }
 );
 

src/sass/structure/header/_meta.scss

@@ -48,7 +48,8 @@
 }
 
 #headerwrapper {
-    position: sticky;
+    position: static;
+    width: 100%;
     top: 0;
     z-index: 150;
     transition: box-shadow 0.2s;

style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
 Theme Name: FAU-Einrichtungen
-Version: 2.3.34-208
+Version: 2.3.34-209
 Requires at least: 6.1
 Tested up to: 6.2
 Requires PHP: 8.0
@@ -9106,7 +9106,8 @@ body.embedded .news-item .news-meta {
 }
 
 #headerwrapper {
-  position: sticky;
+  position: static;
+  width: 100%;
   top: 0;
   z-index: 150;
   transition: box-shadow 0.2s;