javascript - 页脚不动画滚动底部的高度

Question

当我向下滚动 50 像素到底部时，我希望页脚填满整个窗口。我试图为它的高度设置动画但没有成功。

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%;}

j查询

$(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');
}
});

谢谢

Answer 1

问题是当你说 height: '100%' 它说的是 50px 的 100%...

尝试添加

footer { max-height: 100%; }

在你的 CSS 中

它应该可以解决您的问题