JQuery klibbig sidfot - CSS-tricks

I allmänhet är CSS Sticky Footer det bästa sättet att gå, eftersom det fungerar perfekt smidigt och inte kräver JavaScript. Om den önskade markeringen helt enkelt inte är möjlig kan det här jQuery JavaScript vara ett alternativ.

HTML

Se bara till att #footer är den sista synliga saken på din sida.

 Sticky Footer

CSS

Att ge den en inställd höjd är det mest idiotsäkra.

#footer ( height: 100px; )

jQuery

När fönstret laddas och när det rullas eller ändras, testas det om sidans innehåll är kortare än fönstrets höjd. Om så är fallet betyder det att det finns vitt utrymme under innehållet före fönstrets slut, så sidfoten ska placeras om till fönstrets botten. Om inte kan sidfoten bibehålla sin normala statiska positionering.

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