jquery - 滚动时的页脚动画

Question

目前，一旦页面滚动超过设定点，我就会显示页脚，但希望在用户滚动时显示页脚，而不是仅显示在屏幕上(就像当前那样)。

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

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 fiddle :

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