index-main/assets/js/banner-sticky-desktop.js

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;
}