Wie kann ich meine Fußzeile mit jQuery oder JavaScript auf die Fenstergrößenänderung reagieren lassen?

jQuery zur Fenstergröße ändern

Der bereitgestellte jQuery-Code überprüft die Höhe des Fensters nur, wenn die Seite geladen wird. Um dies zu beheben, müssen wir auch die Fensterhöhe bei der Größenänderung überprüfen.

Mit jQuery

Eine einfache Lösung besteht darin, das Größenänderungsereignis mithilfe von an das Fensterobjekt zu binden jQuerys on()-Methode:

$(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'
        });
    }
});

Verwendung von JavaScript und CSS

Alternativ können Sie JavaScript und CSS kombinieren, um Größenänderungsereignisse zu verarbeiten:

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

Leistung Optimierung

Standardmäßig wird das Größenänderungsereignis häufig ausgelöst, was sich auf die Leistung auswirken kann. Um dies zu mildern, können Sie Entprellungs- oder Drosselungsfunktionen verwenden, um die Häufigkeit der Codeausführung zu begrenzen.

Das obige ist der detaillierte Inhalt vonWie kann ich meine Fußzeile mit jQuery oder JavaScript auf die Fenstergrößenänderung reagieren lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!