页脚动画滚动

Question

i当前在页面滚动过一个设定点后出现页脚，但希望将其显示为用户滚动，而不仅仅是出现在屏幕上（就像当前一样）。

有兴趣知道是否可以通过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 -->​

Answer 1

您可以执行以下操作，这将使用CSS Transition

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

您可以在上面看到，在显示页面时，我们正在更改页脚的高度。overflow:none;阻止页脚内容显示高度何时0。

使用此方法，您也可以通过设置不透明度值或对颜色进行更改动画。

JS小提琴：

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

Answer 2

您可以使用fadein（）和fadeout（）jQuery效果来使页脚动画。

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

如果您深入挖掘这些效果，您会发现两者都使用Animate（）效果。

Answer 3

我在您的问题上尝试了一些有趣的实验，但我没有看到其他人尝试此问题（小提琴）：

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

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

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

让我知道您是否有任何疑问。祝你好运！：）

Answer 4

我认为这应该是一种方式：

http://jsfiddle.net/gqqlj/

$(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {
            $('#footer').slideDown(650);
        }else if($(document).scrollTop() < 100){
            $('#footer').fadeOut(500);
        }
    });
})​;​

Answer 5

jQuery＆amp;动画

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

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

相关的代码段（不在小提琴中使用，但在这里说明如何使用编码最佳实践来演示如何执行此操作）：

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

最佳实践

关于最佳实践，您可以在此处找到一篇非常好的有关自定义动画以及如何以可重复使用的方式编写的文章。

至少我知道，没有" jQuery页脚动画"的最佳实践，但是您可以从流行的，设计精良的网站中汲取灵感，以了解什么有效，什么无效。这些例子是不好的，因为这取决于您网站的性质和上下文。

CSS

我不建议CSS过渡，因为这些规格是不是最终确定的（官方草稿，可以在此处找到讨论）。

另外，它们不是跨浏览器兼容的尤其是W.R.T.较旧的浏览器。但是话又说回来，这只是我的看法。