jQuery Sticky Footer

Im Allgemeinen ist die CSS Sticky Footer der beste Weg, da sie perfekt und ohne JavaScript funktioniert. Wenn die erforderliche Markup-Struktur einfach nicht möglich ist, kann dieses jQuery-JavaScript eine Option sein.

HTML

Stellen Sie einfach sicher, dass #footer das letzte sichtbare Element auf Ihrer Seite ist.

<div id="footer">
    Sticky Footer
</div>

CSS

Eine feste Höhe zu geben ist am narrensichersten.

#footer { height: 100px; }

jQuery

Beim Laden des Fensters sowie beim Scrollen oder Ändern der Größe wird getestet, ob der Inhalt der Seiten kürzer ist als die Höhe des Fensters. Wenn ja, bedeutet dies, dass sich unter dem Inhalt bis zum Ende des Fensters ein Leerraum befindet, sodass der Footer am unteren Fensterrand positioniert werden sollte. Wenn nicht, kann der Footer seine normale statische Position beibehalten.

// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 
       
       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");
           
       positionFooter();
       
       function positionFooter() {
       
                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
       
               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }
               
       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)
               
});

Demo

Demo ansehen