79 lines
2.2 KiB
Plaintext
79 lines
2.2 KiB
Plaintext
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;
|
|
|
|
});
|
|
}, { 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');
|
|
header.style.transition = '';
|
|
|
|
|
|
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(() => {
|
|
if(isHeaderFullyVisible){
|
|
return;
|
|
}
|
|
|
|
console.log('Scrollowanie się zakończyło!');
|
|
header.style.transition = `top 0.2s cubic-bezier(0.78, 0, 0.22, 1)`;
|
|
if(isHeaderVisibleMoreThanHalf){
|
|
header.style.top=`${currentScroll}px`;
|
|
}
|
|
|
|
if(!isHeaderVisibleMoreThanHalf){
|
|
header.style.top=`${currentScroll - headerHeight}px`;
|
|
}
|
|
|
|
header.addEventListener('transitionend', () => {
|
|
header.style.transition = '';
|
|
}, { once: true });
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
lastScrollY = currentScroll;
|
|
}
|
|
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', hideHeaderOnScroll); |