页脚没有在滚动底部设置动画高度答案

【问题标题】：Footer not animating height on scrolling bottom页脚没有在滚动底部设置动画高度
【发布时间】：2013-12-14 06:36:14
【问题描述】：

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

谢谢

【问题讨论】：

你能把你的代码放在小提琴里吗？
你说的 50px 是哪里？那是我在 CSS 中设置的 50px 吗？我认为 jquery 将其样式作为样式属性，因此它否决了我在 CSS 中设置的样式？

标签： javascript jquery css jquery-animate

【解决方案1】：

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

尝试添加

footer { max-height: 100%; }

在你的 CSS 中

应该可以解决你的问题

【讨论】：