JQuery Sabit Altbilgi - CSS Hileleri

Anonim

Genel olarak CSS Yapışkan Altbilgisi, mükemmel bir şekilde sorunsuz çalıştığı ve JavaScript gerektirmediği için en iyi yoldur. Gerekli işaretleme mümkün değilse, bu jQuery JavaScript bir seçenek olabilir.

HTML

#Footer'ın sayfanızda görünen son şey olduğundan emin olun.

 Sticky Footer 

CSS

Ona belirli bir yükseklik vermek en aptalca bir kanıttır.

#footer ( height: 100px; )

jQuery

Pencere yüklendiğinde ve kaydırıldığında veya yeniden boyutlandırıldığında, sayfa içeriğinin pencere yüksekliğinden daha kısa olup olmadığı test edilir. Öyleyse, bu, pencerenin sonundan önce içeriğin altında beyaz boşluk olduğu anlamına gelir, bu nedenle altbilgi pencerenin altına yeniden konumlandırılmalıdır. Değilse, altbilgi normal statik konumunu koruyabilir.

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

Demo

Demoyu Görüntüle