JQuery Sticky Footer - CSS-trucs | Codefragmenten 2025

Over het algemeen is de CSS Sticky Footer de beste manier om te gaan, omdat deze perfect soepel werkt en geen JavaScript vereist. Als de vereiste opmaak simpelweg niet mogelijk is, is deze jQuery JavaScript misschien een optie.

HTML

Zorg ervoor dat de #footer het laatste zichtbare item op uw pagina is.

 Sticky Footer

CSS

Het een vaste hoogte geven is het meest onfeilbaar.

#footer ( height: 100px; )

jQuery

Wanneer het venster wordt geladen, en wanneer het wordt gescrolld of vergroot of verkleind, wordt getest of de inhoud van de pagina korter is dan de hoogte van het venster. Als dit het geval is, betekent dit dat er witruimte onder de inhoud is vóór het einde van het venster, dus de voettekst moet naar de onderkant van het venster worden verplaatst. Als dit niet het geval is, kan de voettekst zijn normale statische positie behouden.

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