JQuery Sticky Footer - CSS-Tricks

Spisie treści

Ogólnie rzecz biorąc, lepsza stopka CSS jest najlepszym rozwiązaniem, ponieważ działa idealnie płynnie i nie wymaga JavaScript. Jeśli wymagane znaczniki po prostu nie są możliwe, ten JavaScript jQuery może być opcją.

HTML

Tylko upewnij się, że #footer jest ostatnią widoczną rzeczą na Twojej stronie.

 Sticky Footer

CSS

Podanie mu określonej wysokości jest najbardziej niezawodne.

#footer ( height: 100px; )

jQuery

Podczas ładowania okna i przewijania go lub zmiany jego rozmiaru sprawdza się, czy zawartość stron jest krótsza niż wysokość okna. Jeśli tak, oznacza to, że pod treścią przed końcem okna znajduje się spacja, dlatego stopkę należy przenieść na dół okna. Jeśli nie, stopka może zachować swoje normalne statyczne położenie.

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