的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小提琴：

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

我在试验你的问题时有一些乐趣，我还没有看到其他人试过这个问题（Fiddle）：

$(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); };

最佳做法

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

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

<强> CSS

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

此外，它们不是跨浏览器兼容的，特别是w.r.t.旧浏览器。但话说回来，那只是我的意见。

在页面上滚动动画的页脚

5 个答案:

的jQuery

CSS

JS小提琴：