js header
This commit is contained in:
parent
2672685243
commit
48a928428d
File diff suppressed because one or more lines are too long
|
@ -412,6 +412,10 @@ header .header:hover + .header_nav_container {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shrink {
|
||||||
|
height: 260px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Taille définitive du header après l'animation */
|
/* Taille définitive du header après l'animation */
|
||||||
.header--collapsed {
|
.header--collapsed {
|
||||||
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||||
|
|
|
@ -84,23 +84,22 @@
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
const header = document.querySelector('header');
|
const header = document.querySelector('header');
|
||||||
|
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
|
||||||
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
|
const isTargetPath = window.location.pathname === '/';
|
||||||
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
|
// 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) {
|
if (!isFirstLoad || !isTargetPath) {
|
||||||
header.classList.add('header--collapsed-already');
|
header.classList.add('header--collapsed-already');
|
||||||
// logo.classList.remove('animated');
|
// logo.classList.remove('animated');
|
||||||
stopLogoAnimation();
|
stopLogoAnimation();
|
||||||
} else {
|
} else {
|
||||||
// Sinon, appliquer la transition après un délai
|
// Sinon, appliquer la transition après un délai
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
header.classList.add('header--collapsed');
|
header.classList.add('header--collapsed');
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Gestion du scroll pour afficher/masquer le header nav
|
// Gestion du scroll pour afficher/masquer le header nav
|
||||||
const headerNavContainer = document.querySelector('.header_nav_container');
|
const headerNavContainer = document.querySelector('.header_nav_container');
|
||||||
|
@ -130,7 +129,16 @@
|
||||||
});
|
});
|
||||||
isHidden = false;
|
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() {
|
function handleScroll() {
|
||||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
|
||||||
|
@ -156,6 +164,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
window.addEventListener('scroll', adjustHeaderHeight);
|
||||||
|
|
||||||
// Mouse events for desktop
|
// Mouse events for desktop
|
||||||
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||||
|
|
|
@ -8,6 +8,7 @@ header{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
||||||
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
|
// 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 */
|
// transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
|
||||||
@media(max-width: 810px){
|
@media(max-width: 810px){
|
||||||
|
@ -188,7 +189,9 @@ header{
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.shrink{
|
||||||
|
height: 260px !important;
|
||||||
|
}
|
||||||
/* Taille définitive du header après l'animation */
|
/* Taille définitive du header après l'animation */
|
||||||
.header--collapsed {
|
.header--collapsed {
|
||||||
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||||
|
|
Loading…
Reference in New Issue