Question

当我向下滚动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');
}
});

谢谢

Answer 1

问题在于你说高度：'100％'是100％的50px ...

尝试添加

footer { max-height: 100%; }

在你的CSS中

它应解决您的问题

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

1 个答案: