Wie kann verhindert werden, dass feste Objekte Fußzeilen überlappen?

Feste Objekte in Seitenfußzeilen reparieren

Für das häufige Problem fester Objekte, die über Fußzeilen scrollen, gibt es eine einfache Lösung. Betrachten wir zum Beispiel ein festes „Teilen“-Feld in der unteren linken Ecke des Bildschirms. Um zu verhindern, dass es die Fußzeile überlappt, stoppen wir es etwa 10 Pixel über der Fußzeile.

Zuerst müssen wir bei jedem Scrollen der Seite die Nähe des Felds zur Fußzeile bestimmen:

$(document).scroll(function() {
    checkOffset();
});

Wenn das Feld zu nah an die Fußzeile herankommt (d. h. innerhalb von 10 Pixeln), ändern wir seine Position in „absolut“:

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

Beachten Sie, dass das übergeordnete Element des #social-float ein sein sollte Geschwister der Fußzeile in der HTML-Struktur.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass feste Objekte Fußzeilen überlappen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!