58 lines
No EOL
1.9 KiB
JavaScript
58 lines
No EOL
1.9 KiB
JavaScript
let isInitialized = false;
|
|
|
|
export function bannerStickyDesktop(responsiveSmall) {
|
|
if (isInitialized) return;
|
|
|
|
let body = document.body;
|
|
let panel = body.querySelector(".panel-left");
|
|
|
|
if (!panel) return;
|
|
|
|
let footer = document.querySelector("#site-footer");
|
|
|
|
// Stocker la hauteur initiale du banner
|
|
const bannerInitialHeight = panel.offsetHeight;
|
|
|
|
function checkScroll() {
|
|
const screenWidth = window.innerWidth;
|
|
|
|
// Vérifier que l'écran est plus grand que responsiveSmall
|
|
if (screenWidth <= responsiveSmall) {
|
|
// Réinitialiser le transform si on est en dessous de responsiveSmall
|
|
panel.style.transform = '';
|
|
return;
|
|
}
|
|
|
|
// Calculer la position du bas de la fenêtre
|
|
const windowBottom = window.scrollY + window.innerHeight;
|
|
|
|
// Calculer dynamiquement la position du footer à chaque scroll
|
|
// Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
|
|
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
|
|
|
|
// Calculer de combien on dépasse le haut du footer
|
|
const overlap = windowBottom - footerTop;
|
|
|
|
if (overlap > 0) {
|
|
// Le bas de la fenêtre a atteint le haut du footer
|
|
// Déplacer le banner vers le haut du nombre de pixels de dépassement
|
|
const translateValue = Math.min(overlap, bannerInitialHeight);
|
|
panel.style.transform = `translateY(-${translateValue}px)`;
|
|
} else {
|
|
// Réinitialiser la position si on n'a pas encore atteint le footer
|
|
panel.style.transform = 'translateY(0)';
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', checkScroll);
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth > responsiveSmall) {
|
|
panel.style.transform = '';
|
|
}
|
|
checkScroll();
|
|
});
|
|
|
|
checkScroll();
|
|
|
|
isInitialized = true;
|
|
} |