JQuery липкий колонтитул - CSS-хитрощі

Anonim

Взагалі 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) ));

Демо

Переглянути демонстрацію