8

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

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

​<strong>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 -->​
4

5 回答 5

13

您可以执行以下操作，这将利用 CSS 过渡

jQuery

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

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

CSS

show然后，使用 CSS，根据该类的存在显示或隐藏页脚。我们可以使用 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/

于 2012-11-18T14:12:59.323 回答
0

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

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

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

于 2012-11-06T13:40:39.033 回答
0

我对您的问题进行了一些有趣的实验，但我还没有看到其他人尝试过这个（小提琴）：

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

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


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


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

于 2012-11-20T18:36:36.943 回答
0

我认为应该是这样的：

http://jsfiddle.net/gQqLJ/

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

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

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

            $('#footer').fadeOut(500);
        }
    });
})​;​
于 2012-11-23T20:10:27.820 回答
0

jQuery 和动画

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

工作小提琴：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 过渡，因为规范尚未最终确定（官方草稿，可以在这里找到讨论）。

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

于 2012-11-24T10:14:37.893 回答