Wie kann verhindert werden, dass Elemente mit fester Position die Fußzeile überlappen?

Lösung der Überlappung fester Positionen bei Fußzeilenproblemen

Beim Entwerfen von Webseiten mit Elementen fester Position kommt es häufig zu Szenarios, in denen diese Elemente vorhanden sind Überlappung mit der Seitenfußzeile. Um dieses Problem anzugehen, kann eine einfache und effektive jQuery-Lösung implementiert werden.

Identifizieren Sie die Elemente

Der bereitgestellte HTML-Code definiert das Share-Box-Element (#social-float ) und das CSS positioniert es an einer festen unteren linken Ecke. Das Fußzeilenelement (#footer) hat keine feste Höhe.

Seitenscrollen verarbeiten

Um die Position des Freigabefelds relativ zur Fußzeile zu überwachen, registrieren Sie a Scroll-Ereignishandler mit der scroll()-Methode von jQuery.

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

Freigabebox-Offset prüfen

Berechnen Sie innerhalb der checkOffset()-Funktion den vertikalen Versatz der Freigabebox in Bezug auf die Fußzeile. Wenn der Versatz weniger als 10 Pixel beträgt, was bedeutet, dass die Freigabebox in die Fußzeile eingedrungen ist, aktualisieren Sie ihre Position auf absolut.

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
}

Feste Position wiederherstellen

Wenn die Der Benutzer scrollt auf der Seite zurück und stellt die feste Position der Freigabebox wieder her, indem er seine Position wieder auf „Fest“ setzt.

if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed');

Geschwisterelemente sicherstellen

Das übergeordnete Element von Die Share-Box (#social-float) sollte ein Geschwisterteil der Fußzeile (#footer) sein. Dies ermöglicht eine korrekte Positionierung relativ zur Fußzeile.

<div class="social-float-parent">
    <div>

Durch die Implementierung dieser jQuery-Lösung bleibt die Freigabebox an ihrem Platz, stoppt jedoch automatisch, bevor sie die Fußzeile überlappt, wodurch ein sauberes und optisch ansprechendes Design gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Elemente mit fester Position die Fußzeile überlappen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!