JQuery kleepuv jalus - CSS-trikid

Üldiselt on parim viis CSS-i kleepuv jalus, kuna see töötab täiesti sujuvalt ega vaja JavaScripti. Kui vajalik märgistus pole lihtsalt võimalik, võib see jQuery JavaScript olla üks võimalus.

HTML

Lihtsalt veenduge, et #footer on teie lehel viimane nähtav asi.

 Sticky Footer

CSS

Kindla kõrguse andmine on kõige lollikindlam.

#footer ( height: 100px; )

jQuery

Akna laadimisel ja kerimisel või suuruse muutmisel testitakse, kas lehtede sisu on akna kõrgusest lühem. Kui see on nii, tähendab see, et sisu all on enne akna lõppu tühi koht, nii et jalus tuleks paigutada akna põhja. Kui ei, siis saab jalus säilitada oma tavalise staatilise positsiooni.

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