Линейный нижний колонтитул jQuery онлайн урок.


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

# HTML

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

<div id="footer">
Sticky Footer
</div>

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

});

# Демонстрация

Просмотр демонстрации