JQuery Prilepená päta - Triky CSS

Všeobecne je CSS Sticky Footer najlepším spôsobom, ako pracovať, pretože funguje dokonale hladko a nevyžaduje JavaScript. Ak požadované označenie jednoducho nie je možné, môže byť ako alternatíva k dispozícii tento JavaScript JavaQuery.

HTML

Len sa uistite, že # chodidlo je posledná viditeľná vec na vašej stránke.

 Sticky Footer

CSS

Dať mu nastavenú výšku je najbláznivejšie.

#footer ( height: 100px; )

jQuery

Pri načítaní okna a pri jeho posúvaní alebo zmene veľkosti sa testuje, či je obsah stránok menší ako výška okna. Ak je, znamená to, že pod obsahom je pred koncom okna biele miesto, takže päta by mala byť premiestnená do spodnej časti okna. Ak nie, päta si môže udržať svoje normálne statické umiestnenie.

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