JQuery Sticker Footer - CSS-Tricks | Fragmente de cod 2025

În general, Footer-ul CSS Sticky este cel mai bun mod de a merge, deoarece funcționează perfect fără a necesita JavaScript. Dacă marcajul necesar pur și simplu nu este posibil, acest jQuery JavaScript ar putea fi o opțiune.

HTML

Asigurați-vă că #footer este ultimul lucru vizibil de pe pagina dvs.

 Sticky Footer

CSS

A-i oferi o înălțime stabilită este cel mai prost.

#footer ( height: 100px; )

jQuery

Când fereastra se încarcă și când este derulată sau redimensionată, se testează dacă conținutul paginilor este mai scurt decât înălțimea ferestrei. Dacă este, înseamnă că există spațiu alb sub conținut înainte de sfârșitul ferestrei, astfel încât subsolul să fie repoziționat în partea de jos a ferestrei. Dacă nu, subsolul poate păstra poziționarea statică normală.

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