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  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 <p><strong>Performances Optimisation</strong></p><p>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.</p>

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!