Add indexv2.js
This commit is contained in:
42
indexv2.js
Normal file
42
indexv2.js
Normal file
@@ -0,0 +1,42 @@
|
||||
function hideHeaderOnScroll() {
|
||||
const header = document.querySelector('.header__mobile');
|
||||
if (!header) return;
|
||||
|
||||
let lastScrollY = window.scrollY;
|
||||
let offset = 0;
|
||||
const headerHeight = header.offsetHeight;
|
||||
|
||||
function onScroll() {
|
||||
const currentScroll = window.scrollY;
|
||||
const diff = currentScroll - lastScrollY;
|
||||
|
||||
offset += diff;
|
||||
offset = Math.max(0, Math.min(offset, headerHeight));
|
||||
|
||||
header.style.transform = `translateY(-${offset}px)`;
|
||||
lastScrollY = currentScroll;
|
||||
}
|
||||
|
||||
function onTouchEnd() {
|
||||
const visiblePart = headerHeight - offset;
|
||||
const visiblePercentage = (visiblePart / headerHeight) * 100;
|
||||
header.style.transition = '0.2s cubic-bezier(0.78, 0, 0.22, 1) transform';
|
||||
header.addEventListener('transitionend', () => {
|
||||
header.style.transition = 'none';
|
||||
}, { once: true });
|
||||
|
||||
|
||||
if (visiblePercentage > 50) {
|
||||
offset = 0;
|
||||
header.style.transform = 'translateY(0)';
|
||||
} else {
|
||||
offset = headerHeight;
|
||||
header.style.transform = `translateY(-${headerHeight}px)`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll);
|
||||
window.addEventListener('touchend', onTouchEnd);
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', hideHeaderOnScroll);
|
||||
Reference in New Issue
Block a user