JQuery-tahmea alatunniste - CSS-temppuja

CSS Sticky Footer on yleensä paras tapa edetä, koska se toimii täydellisesti sujuvasti eikä vaadi JavaScriptiä. Jos vaadittu merkintä ei yksinkertaisesti ole mahdollista, tämä jQuery JavaScript voi olla vaihtoehto.

HTML

Varmista vain, että #footer on viimeinen näkyvä asia sivullasi.

 Sticky Footer

CSS

Asetetun korkeuden antaminen on kaikkein typerintä.

#footer ( height: 100px; )

jQuery

Kun ikkuna latautuu ja kun sitä vieritetään tai sen kokoa muutetaan, testataan, onko sivujen sisältö lyhyempi kuin ikkunan korkeus. Jos se on, se tarkoittaa, että sisällön alla on valkoinen tila ennen ikkunan loppua, joten alatunniste tulisi sijoittaa uudelleen ikkunan alaosaan. Jos ei, alatunniste voi säilyttää normaalin staattisen sijaintinsa.

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