Skip to content

Instantly share code, notes, and snippets.

@lizardking8610
Created May 18, 2017 17:05
Show Gist options
  • Save lizardking8610/55750a5f8b4f2962a413fbd4b31609ce to your computer and use it in GitHub Desktop.
Save lizardking8610/55750a5f8b4f2962a413fbd4b31609ce to your computer and use it in GitHub Desktop.
jQuery: sticky footer
#footer { height: 100px; }
<div id="footer">
Sticky Footer
</div>
// 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)
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment