Add index3

index3

@@ -0,0 +1,77 @@
+
+function hideHeaderOnScroll() {
+  const header = document.querySelector('.header__mobile');
+  if (!header) return;
+  
+  let isHeaderVisible = true;
+  let isHeaderFullyVisible = true;
+  let isHeaderVisibleMoreThanHalf = true;
+  let scrollTimeout = null;
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    isHeaderVisible = entry.isIntersecting; 
+    isHeaderFullyVisible = entry.intersectionRatio >= 0.999;
+    isHeaderVisibleMoreThanHalf = entry.intersectionRatio > 0.5;
+
+    console.log('Header choć trochę widoczny?', isHeaderVisible);
+    console.log('Header jest cały widoczny?', isHeaderFullyVisible, entry.intersectionRatio);
+  });
+}, { threshold: [0, 0.25, 0.49, 0.5, 0.51, 0.75, 1] });
+
+  observer.observe(header);
+
+  
+  const headerHeight = header.offsetHeight;
+  let lastScrollY = window.scrollY;
+  
+  function onScroll() {
+    clearTimeout(scrollTimeout);
+    const currentScroll = window.scrollY;
+    const isScrollingDown = currentScroll > lastScrollY;
+    const isHeaderFixed = header.classList.contains('header__mobile--fixed');
+    
+    
+    
+    if(!isHeaderVisible && isScrollingDown){
+      header.classList.remove("header__mobile--fixed");
+      header.style.top=`${currentScroll - headerHeight}px`;
+    }
+    
+    if(isHeaderFullyVisible && !isScrollingDown && !isHeaderFixed){
+      header.classList.add("header__mobile--fixed");
+      header.style.top="0px";
+    }
+    
+    if(isHeaderFullyVisible && isScrollingDown && isHeaderFixed){
+      header.classList.remove("header__mobile--fixed");
+      header.style.top=`${currentScroll}px`;
+    }
+    
+    
+    
+    scrollTimeout = setTimeout(() => {
+      console.log('Scrollowanie się zakończyło!');
+      header.style.transition = `0.2s cubic-bezier(0.78, 0, 0.22, 1)`;
+      if(isHeaderVisibleMoreThanHalf && !isHeaderFullyVisible){
+        console.log("header jest widoczny wiecej niz polowa");
+        header.style.top=`${currentScroll}px`;
+      }
+      
+      if(!isHeaderVisibleMoreThanHalf && !isHeaderFullyVisible){
+        console.log("header jest widoczny mniej niz polowa");
+        header.style.top=`${currentScroll - headerHeight}px`;
+      }
+      
+    header.addEventListener('transitionend', () => {
+      header.style.transition = '';
+    }, { once: true });
+      
+    }, 300);
+    
+
+ 
+    lastScrollY = currentScroll;
+  }
+  
+  window.addEventListener('scroll', onScroll, { passive: true });
+}