JQuery Sticky Footer - CSS-трикове | Кодови фрагменти 2025

Като цяло CSS Sticky Footer е най-добрият начин, тъй като работи перфектно гладко и не изисква JavaScript. Ако изискваното маркиране просто не е възможно, този jQuery JavaScript може да е опция.

HTML

Просто се уверете, че #footer е последното видимо нещо на вашата страница.

 Sticky Footer

CSS

Придаването на зададена височина е най-надеждното.

#footer ( height: 100px; )

jQuery

Когато прозорецът се зареди и когато се превърта или преоразмери, се проверява дали съдържанието на страниците е по-кратко от височината на прозореца. Ако е така, това означава, че под съдържанието преди края на прозореца има празно пространство, така че долният колонтитул трябва да се премести в долната част на прозореца. Ако не, долният колонтитул може да запази нормалното си статично позициониране.

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