diff --git a/index3 b/index3 index 37068a2..bcebc34 100644 --- a/index3 +++ b/index3 @@ -1,4 +1,3 @@ - function hideHeaderOnScroll() { const header = document.querySelector('.header__mobile'); if (!header) return; @@ -7,14 +6,12 @@ function hideHeaderOnScroll() { let isHeaderFullyVisible = true; let isHeaderVisibleMoreThanHalf = true; let scrollTimeout = null; -const observer = new IntersectionObserver((entries) => { + 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] }); @@ -29,7 +26,7 @@ const observer = new IntersectionObserver((entries) => { const currentScroll = window.scrollY; const isScrollingDown = currentScroll > lastScrollY; const isHeaderFixed = header.classList.contains('header__mobile--fixed'); - + header.style.transition = ''; if(!isHeaderVisible && isScrollingDown){ @@ -50,15 +47,17 @@ const observer = new IntersectionObserver((entries) => { scrollTimeout = setTimeout(() => { + if(isHeaderFullyVisible){ + return; + } + 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.transition = `top 0.2s cubic-bezier(0.78, 0, 0.22, 1)`; + if(isHeaderVisibleMoreThanHalf){ header.style.top=`${currentScroll}px`; } - if(!isHeaderVisibleMoreThanHalf && !isHeaderFullyVisible){ - console.log("header jest widoczny mniej niz polowa"); + if(!isHeaderVisibleMoreThanHalf){ header.style.top=`${currentScroll - headerHeight}px`; } @@ -66,7 +65,7 @@ const observer = new IntersectionObserver((entries) => { header.style.transition = ''; }, { once: true }); - }, 300); + }, 500); @@ -75,3 +74,6 @@ const observer = new IntersectionObserver((entries) => { window.addEventListener('scroll', onScroll, { passive: true }); } + + +document.addEventListener('DOMContentLoaded', hideHeaderOnScroll); \ No newline at end of file