webomnizz_sticky-footer-with-jquery

How to make footer Section Sticky with jQuery

In general the CSS Sticky Footer is the most effective way to go, because it works perfectly smoothly and does not require JavaScript. If the markup needed merely isn’t attainable, this jQuery JavaScript might be an choice. it really help ful for project…

HTML

Just create sure the #footer is that the last visible thing on your page.

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

 

CSS

Giving it a set height is the most fool-proof.

#footer { height: 100px; }

jQuery

When the window load, and when it is scrolled or resized, it’s tested whether or not the pages content is shorter than the window’s height. If it is, meaning there’s white space beneath the content before the end of the window, thus the footer ought to be repositioned to the bottom of the window. If not, the footer will retain it’s normal static positioning.

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

Leave a Reply

Powered by moviekillers.com