91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const header = document.querySelector('header');
|
|
const wpAdminBar = document.querySelector('#wpadminbar');
|
|
|
|
const stickyHeaderMobile = document.querySelector('.header-right');
|
|
const relativeHeaderMobile = document.querySelector('.header-left');
|
|
|
|
const mainLogo = document.querySelector('.main-logo');
|
|
const description = document.querySelector('.description');
|
|
const burgerContainer = document.querySelector('.menu-toggle > div');
|
|
const menuIconContainer = document.querySelector('.menu-toggle > div > div');
|
|
const menuText = document.querySelector('.menu-toggle > div > p');
|
|
|
|
const breakpointTablet = 768;
|
|
|
|
function checkMobile() {
|
|
if (window.innerWidth < breakpointTablet) {
|
|
stickyHeaderMobile.style.top = wpAdminBar ? `${wpAdminBar.offsetHeight}px` : '0px';
|
|
} else {
|
|
stickyHeaderMobile.style.top = 'unset';
|
|
}
|
|
}
|
|
|
|
function resetStyles() {
|
|
header.style.removeProperty("height");
|
|
mainLogo.style.removeProperty("padding");
|
|
description.style.removeProperty("opacity");
|
|
burgerContainer.style.removeProperty("padding");
|
|
burgerContainer.style.removeProperty("justify-content");
|
|
menuIconContainer.style.removeProperty("font-size");
|
|
menuText.style.removeProperty("display");
|
|
}
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const isScrolledTop = window.scrollY === 0;
|
|
if (window.innerWidth < breakpointTablet) {
|
|
// mobile
|
|
if (window.scrollY > header.getBoundingClientRect().bottom) {
|
|
// déployer petit logo à gauche
|
|
if(!stickyHeaderMobile.classList.contains('scrolled')) {
|
|
stickyHeaderMobile.classList.add('scrolled')
|
|
}
|
|
} else {
|
|
// rétracter petit logo à gauche
|
|
if(stickyHeaderMobile.classList.contains('scrolled')) {
|
|
stickyHeaderMobile.classList.remove('scrolled');
|
|
}
|
|
}
|
|
} else {
|
|
// desktop
|
|
header.style.height = isScrolledTop ? '12vh' : '6vh';
|
|
header.style.minHeight = isScrolledTop ? '100px' : 'unset';
|
|
mainLogo.style.padding = isScrolledTop ? '1.5rem 2rem' : '0.2rem 0.4rem';
|
|
description.style.opacity = isScrolledTop ? '1' : '0';
|
|
burgerContainer.style.padding = isScrolledTop ? '2rem' : '0.6rem 1rem';
|
|
burgerContainer.style.justifyContent = isScrolledTop ? 'space-between' : 'center';
|
|
menuIconContainer.style.fontSize = isScrolledTop ? '2rem' : '1.5rem';
|
|
menuText.style.display = isScrolledTop ? '' : 'none';
|
|
|
|
|
|
|
|
if (window.scrollY === 0) {
|
|
// agrandir le header
|
|
} else {
|
|
// diminuer le header
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
|
|
let resizeTimeout;
|
|
let previousWidth = window.innerWidth;
|
|
|
|
window.addEventListener('resize', () => {
|
|
let currentWidth = window.innerWidth;
|
|
|
|
if (currentWidth !== previousWidth) {
|
|
window.scrollTo(0, 0);
|
|
previousWidth = currentWidth;
|
|
}
|
|
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(function() {
|
|
resetStyles();
|
|
checkMobile();
|
|
}, 150);
|
|
});
|
|
|
|
checkMobile();
|
|
}); |