ixed files and buttons

Profice WebSite/scripts/scroll-header.js

@@ -0,0 +1,83 @@
+// scroll-header.js
+document.addEventListener("DOMContentLoaded", function() {
+    const topBanner = document.querySelector('.top-banner');
+    const slideMenu = document.querySelector('.slide-menu');
+    
+    if (!topBanner) return;
+    
+    // Scroll threshold to trigger the shrink effect
+    const scrollThreshold = 50;
+    let isScrolled = false;
+    let isTransitioning = false;
+    let lastScrollY = 0;
+    let scrollDirection = 'down';
+    
+    function updateHeaderState(scrolled) {
+        if (isTransitioning) return;
+        
+        if (scrolled && !isScrolled) {
+            isTransitioning = true;
+            topBanner.classList.add('scrolled');
+            isScrolled = true;
+            
+            if (slideMenu) {
+                slideMenu.style.top = '80px';
+            }
+            
+            // Reset transition flag after animation completes
+            setTimeout(() => {
+                isTransitioning = false;
+            }, 250);
+            
+        } else if (!scrolled && isScrolled) {
+            isTransitioning = true;
+            topBanner.classList.remove('scrolled');
+            isScrolled = false;
+            
+            if (slideMenu) {
+                slideMenu.style.top = '110px';
+            }
+            
+            // Reset transition flag after animation completes
+            setTimeout(() => {
+                isTransitioning = false;
+            }, 250);
+        }
+    }
+    
+    function handleScroll() {
+        const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
+        
+        // Detect scroll direction
+        if (currentScrollY > lastScrollY) {
+            scrollDirection = 'down';
+        } else if (currentScrollY < lastScrollY) {
+            scrollDirection = 'up';
+        }
+        
+        // Only update when crossing threshold in the right direction
+        if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) {
+            updateHeaderState(true);
+        } else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) {
+            updateHeaderState(false);
+        }
+        
+        lastScrollY = currentScrollY;
+    }
+    
+    // Use requestAnimationFrame for smooth scroll handling
+    let ticking = false;
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(handleScroll);
+            ticking = true;
+            setTimeout(() => { ticking = false; }, 16); // ~60fps
+        }
+    }
+    
+    // Optimized scroll event listener
+    window.addEventListener('scroll', requestTick, { passive: true, capture: false });
+    
+    // Initial check
+    handleScroll();
+});