Comment puis-je rendre mon pied de page réactif au redimensionnement de la fenêtre à l'aide de jQuery ou de JavaScript ?

jQuery pour le redimensionnement de la fenêtre

Le code jQuery fourni vérifie la hauteur de la fenêtre uniquement lors du chargement de la page. Pour remédier à ce problème, nous devons également vérifier la hauteur de la fenêtre lors du redimensionnement.

Utilisation de jQuery

Une solution simple consiste à lier l'événement resize à l'objet fenêtre en utilisant Méthode on() de jQuery :

$(window).on('resize', function() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    } else if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

Utilisation de JavaScript et CSS

Vous pouvez également combiner JavaScript et CSS pour gérer les événements de redimensionnement :

CSS :

.footer {
    position: static;
    bottom: auto;
    left: auto;
}

@media screen and (min-height: 820px) {
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
    }
}

JavaScript :

window.onresize = function() {
    if (window.innerHeight >= 820) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } else if (window.innerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
}

Performances Optimisation

Par défaut, l'événement de redimensionnement sera déclenché fréquemment, ce qui peut avoir un impact sur les performances. Pour atténuer cela, vous pouvez utiliser des fonctions anti-rebond ou d'accélération pour limiter la fréquence d'exécution du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!