JQuery Lepljiva noga - CSS-triki

Na splošno je CSS Sticky Footer najboljši način, saj deluje popolnoma gladko in ne potrebuje JavaScripta. Če zahtevanega označevanja preprosto ni mogoče, je morda na voljo ta jQuery JavaScript.

HTML

Prepričajte se, da je #footer zadnja vidna stvar na vaši strani.

 Sticky Footer

CSS

Dajanje nastavljene višine je najbolj varno.

#footer ( height: 100px; )

jQuery

Ko se okno naloži in se pomakne ali spremeni, se preskusi, ali je vsebina strani krajša od višine okna. Če je, to pomeni, da je pod vsebino pred koncem okna prazen prostor, zato je treba nogo postaviti na dno okna. V nasprotnem primeru lahko noga ohrani normalno statično pozicioniranje.

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