【问题标题】：Footer to animate in on scroll页脚动画在滚动
【发布时间】：2012-10-26 08:31:51
【问题描述】：

我目前在页面滚动超过设定点后显示页脚，但希望在用户滚动时显示页脚，而不是仅出现在屏幕上（就像目前那样）。

想知道是否可以通过 CSS 过渡或最佳实践来实现。

现场示例 http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer {
    background: black;
    width: 100%;
    height: 48px;
    position: fixed;
    z-index:300;
    bottom: 0;
    display: none;
}

#footer ul.navigation li {
    float: left;
    margin-right: 16px;
    display: block;
}

JS

$(function(){
    $(window).scroll(function() {              
        $('#footer').toggle($(document).scrollTop() > 100);
    });
})

HTML

<div id="footer">
  <div class="content-wrap">
    <ul class="navigation">
      <li><a href="#about">About</a></li>
      <li><a href="#blog">Blog</a></li>
      <li><a href="#support">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div><!-- content-wrap END -->
</div><!-- footer END -->

【问题讨论】：

你想到了什么动画？ jQuery 大概可以animate it

标签： jquery css-transitions sticky-footer

【解决方案1】：

您可以使用 fadeIn() 和 fadeOut() jQuery 效果为页脚设置动画。

$(window).scroll(function() {           
    if($(document).scrollTop() > 100)
        $('#footer').fadeIn();
    else
        $('#footer').fadeOut();
    });

如果您深入研究这些效果，您会发现两者都使用animate() 效果和不透明度。

【讨论】：

这只是一个淡入淡出，我想要更多的动画

【解决方案2】：

您可以使用 CSS 过渡执行以下操作

jQuery

我们想根据滚动位置在页脚中添加或删除一个类

$(function(){
    $(window).scroll(function(){  
        if($(document).scrollTop() > 100)
        {    
              $('#footer').addClass("show");
        }
        else
        {
            $('#footer').removeClass("show");
        }
    });
})

CSS

然后，使用 CSS，根据 show 类的存在显示或隐藏页脚。我们可以使用 css 过渡来动画变化

#footer 
{
    background: black;
    width: 100%;
    height: 0px;
    position: fixed;
    z-index:300;
    bottom: 0;
    overflow:none;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footer.show
{
    height: 48px;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

正如您在上面看到的，我们在显示页脚时更改了页脚的高度。当高度为 0 时，overflow:none; 会阻止页脚的内容显示。

使用此方法，您还可以通过设置不透明度值来淡入页脚，或为颜色变化设置动画。

JS 小提琴：

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

【讨论】：

【解决方案3】：

我对您的问题进行了一些有趣的试验，但我还没有看到其他人尝试过这个 (Fiddle)：

$(function() {
    $(window).scroll(function() {
        $("#footer").fadeTo("500", $(document).scrollTop() / 100);
    });
})

如果用户向上滚动，此解决方案还将使页脚淡出。

这个解决方案有一个主要缺点：因为它使用fadeTo() 方法，所以在 IE 中的支持将非常有限（实际上，它会在大多数版本的 IE 中中断 - 我不记得对 9 的支持是什么了和 10)。您可以通过使用十几个插件/修复中的一个来解决此问题，以在 IE 中添加对opacity 属性的动画支持，并相应地修改此解决方案（使用animate() 而不是fadeTo()）。

如果您有任何问题，请告诉我。祝你好运！ :)

【讨论】：

【解决方案4】：

我觉得应该是这样的：

http://jsfiddle.net/gQqLJ/

$(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {

            $('#footer').slideDown(650);

        }else if($(document).scrollTop() < 100){

            $('#footer').fadeOut(500);
        }
    });
});

【讨论】：

【解决方案5】：

JQuery 和动画

对于这样的事情，我建议使用滑动和淡入淡出的组合效果。它看起来更自然，因此不会在发生时对用户造成震动。

工作小提琴：http://jsfiddle.net/3zh6h/32/

相关代码sn-p（在fiddle中没有使用，但这里是为了演示如何在考虑编码最佳实践的情况下做到这一点）：

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

最佳做法

关于最佳实践，您可以找到一篇关于自定义动画以及如何以可重用方式编写它们的非常好的帖子here。

至少我知道没有这样的“jquery 页脚动画”最佳实践，但您可以从流行的、精心设计的网站中汲取经验，了解哪些有效，哪些无效。这些例子并不好，因为它取决于您网站的性质和背景。

CSS

我不建议 CSS 过渡，因为规范尚未最终确定（官方草稿，可以在 here 找到讨论）。

此外，它们不是跨浏览器兼容的，尤其是 w.r.t。较旧的浏览器。但话又说回来，这只是我的意见。

【讨论】：