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 Pixel), ä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 
Beachten Sie, dass das übergeordnete Element des #social-float ein gleichgeordnetes Element der Fußzeile in der HTML-Struktur sein sollte.