FrontendComponents/auto-hide-sticky-header
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index3

Browse Source
This commit is contained in:
kkrzowski
2025-11-03 10:54:03 +01:00
parent afc78cd93c
commit b284f87e90
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index3
View File

@@ -1,4 +1,3 @@
function hideHeaderOnScroll() { function hideHeaderOnScroll() {
const header = document.querySelector('.header__mobile'); const header = document.querySelector('.header__mobile');
if (!header) return; if (!header) return;
@@ -7,14 +6,12 @@ function hideHeaderOnScroll() {
let isHeaderFullyVisible = true; let isHeaderFullyVisible = true;
let isHeaderVisibleMoreThanHalf = true; let isHeaderVisibleMoreThanHalf = true;
let scrollTimeout = null; let scrollTimeout = null;
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { entries.forEach(entry => {
isHeaderVisible = entry.isIntersecting; isHeaderVisible = entry.isIntersecting;
isHeaderFullyVisible = entry.intersectionRatio >= 0.999; isHeaderFullyVisible = entry.intersectionRatio >= 0.999;
isHeaderVisibleMoreThanHalf = entry.intersectionRatio > 0.5; 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] }); }, { 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 currentScroll = window.scrollY;
const isScrollingDown = currentScroll > lastScrollY; const isScrollingDown = currentScroll > lastScrollY;
const isHeaderFixed = header.classList.contains('header__mobile--fixed'); const isHeaderFixed = header.classList.contains('header__mobile--fixed');
header.style.transition = '';
if(!isHeaderVisible && isScrollingDown){ if(!isHeaderVisible && isScrollingDown){
@@ -50,15 +47,17 @@ const observer = new IntersectionObserver((entries) => {
scrollTimeout = setTimeout(() => { scrollTimeout = setTimeout(() => {
if(isHeaderFullyVisible){
return;
}
console.log('Scrollowanie się zakończyło!'); console.log('Scrollowanie się zakończyło!');
header.style.transition = `0.2s cubic-bezier(0.78, 0, 0.22, 1)`; header.style.transition = `top 0.2s cubic-bezier(0.78, 0, 0.22, 1)`;
if(isHeaderVisibleMoreThanHalf && !isHeaderFullyVisible){ if(isHeaderVisibleMoreThanHalf){
console.log("header jest widoczny wiecej niz polowa");
header.style.top=`${currentScroll}px`; header.style.top=`${currentScroll}px`;
} }
if(!isHeaderVisibleMoreThanHalf && !isHeaderFullyVisible){ if(!isHeaderVisibleMoreThanHalf){
console.log("header jest widoczny mniej niz polowa");
header.style.top=`${currentScroll - headerHeight}px`; header.style.top=`${currentScroll - headerHeight}px`;
} }
@@ -66,7 +65,7 @@ const observer = new IntersectionObserver((entries) => {
header.style.transition = ''; header.style.transition = '';
}, { once: true }); }, { once: true });
}, 300); }, 500);
@@ -75,3 +74,6 @@ const observer = new IntersectionObserver((entries) => {
window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('scroll', onScroll, { passive: true });
} }
document.addEventListener('DOMContentLoaded', hideHeaderOnScroll);