页脚在滚动底部没有动画高度

时间:2013-11-28 09:39:29

标签: javascript jquery css jquery-animate

当我向下滚动50px到底部时,我希望页脚填满整个窗口。我尝试动画它的高度,但没有工作。

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

谢谢

1 个答案:

答案 0 :(得分:0)

问题在于你说高度:'100%'是100%的50px ...

尝试添加

footer { max-height: 100%; }

在你的CSS中

它应解决您的问题