在页面上滚动动画的页脚

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

正如您在上面看到的那样,我们在显示时会更改页脚的高度.在overflow:none;从表示当高度为0停止页脚的内容.

使用此方法,您还可以通过设置不透明度值或为颜色更改设置动画来淡入页脚.

JS小提琴:

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