JQuery Sticky Footer - CSS-хитрости | Фрагменты кода 2024

В целом CSS Sticky Footer - лучший вариант, поскольку он работает идеально плавно и не требует JavaScript. Если требуемая разметка просто невозможна, этот jQuery JavaScript может быть вариантом.

HTML

Просто убедитесь, что нижний колонтитул является последним видимым элементом на вашей странице.

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