How can I make the footer fill the entire window when scrolling down 50px from the bottom? I attempted to animate its height, but it's not working as expected.
HTML
<div id="main">
...
</div>
<footer>
<div id="sitemap">Sitemap</div>
<div id="about">About Us</div>
<div id="contact">Contact Us</div>
</footer>
CSS
* { margin:0; padding:0;}
#main { height:1400px;}
footer { background:#333; color:#FAFAFA; border-top:5px solid #000; width:100%; height:50px; }
footer > div { display:inline-block; height:auto;}
#sitemap { width:25%;}
#about { width:35%;}
jquery
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(),
docH = $(document).height(),
winH = $(this).height();
if(scrollTop + winH >= docH-50){
$('footer').stop().animate({height:'100%'},'slow');
}else{
$('footer').stop().animate({height:'50px'},'slow');
}
});
Thank you