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,7 +84,6 @@
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
@ -131,6 +130,15 @@
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 */