diff --git a/index3 b/index3 new file mode 100644 index 0000000..37068a2 --- /dev/null +++ b/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 }); +}