js header

This commit is contained in:
ouidade 2024-07-10 09:41:32 +02:00
parent 2672685243
commit 48a928428d
4 changed files with 25 additions and 9 deletions

File diff suppressed because one or more lines are too long

View File

@ -412,6 +412,10 @@ header .header:hover + .header_nav_container {
transform: translateX(0);
}
.shrink {
height: 260px !important;
}
/* Taille définitive du header après l'animation */
.header--collapsed {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */

View File

@ -84,23 +84,22 @@
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
} else {
} else {
// Sinon, appliquer la transition après un délai
setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
}
}
// Gestion du scroll pour afficher/masquer le header nav
const headerNavContainer = document.querySelector('.header_nav_container');
@ -130,7 +129,16 @@
});
isHidden = false;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
headerLeftContainer.classList.add('shrink');
} else {
headerLeftContainer.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
@ -156,6 +164,7 @@
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);

View File

@ -8,6 +8,7 @@ header{
position: fixed;
top: 0;
transition: none;
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
// transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 810px){
@ -188,7 +189,9 @@ header{
transform: translateX(0);
}
}
.shrink{
height: 260px !important;
}
/* Taille définitive du header après l'animation */
.header--collapsed {
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */