JQuery Sticky Footer - Triky CSS

Anonim

Obecně je CSS Sticky Footer nejlepší způsob, jak jít, protože funguje dokonale hladce a nevyžaduje JavaScript. Pokud požadované označení jednoduše není možné, může být tento JavaScript jQuery alternativou.

HTML

Jen se ujistěte, že #footer je poslední viditelná věc na vaší stránce.

 Sticky Footer 

CSS

Stanovení výšky je nejbláznivější.

#footer ( height: 100px; )

jQuery

Když se okno načte a když se posouvá nebo mění jeho velikost, testuje se, zda je obsah stránek kratší než výška okna. Pokud ano, znamená to, že pod obsahem je prázdné místo před koncem okna, takže zápatí by mělo být přemístěno do spodní části okna. Pokud ne, může si zápatí zachovat normální statické umístění.

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

Ukázka

Zobrazit ukázku