JQuery Sticky Footer - CSS-trükkök

Általában a CSS Sticky Footer a legjobb út, mivel tökéletesen simán működik, és nem igényel JavaScript-et. Ha a szükséges jelölés egyszerűen nem lehetséges, akkor ez a jQuery JavaScript opció lehet.

HTML

Csak győződjön meg arról, hogy a #footer az utolsó látható dolog az oldalon.

 Sticky Footer

CSS

A beállított magasság megadása a legbolondabb.

#footer ( height: 100px; )

jQuery

Amikor az ablak betöltődik, és amikor görgeti vagy átméretezi, tesztelik, hogy az oldalak tartalma rövidebb-e, mint az ablak magassága. Ha igen, ez azt jelenti, hogy a tartalom alatt az ablak vége előtt fehér hely van, ezért a láblécet át kell helyezni az ablak aljára. Ha nem, a lábléc megtarthatja normál statikus helyzetét.

// 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) ));