当您到达屏幕底部时，页脚会动画，但在向上滚动时无法设置动画效果 [英] Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up

问题描述

当用户滚动到页面的最底部时，我有一个动画的页脚。现在它在动画完成后仍然处于动画后状态。但是，一旦用户向后滚动页面，我就会尝试让它恢复动画。

I have a footer that animates up when the user scrolls to the very bottom of the page. Right now it is currently staying in the post-animation state after animation completes. However, I'm trying to get it to animate back down once the user scrolls back up the page a little bit.

这是我的代码到目前为止。这会正确地为页脚设置动画，但不会向下设置：

Here's my code so far. This correctly animates the footer up, but not back down:

$(window).scroll(function() {
  var i;
  i = 0;
  if ($(window).scrollTop() + $(window).height() === $(document).height()) {
    i = 1;
    $("footer").animate({
      marginBottom: "-22px"
    }, 500);
  }
  else if (i > 0 && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
    $("footer").animate({
      marginBottom: "-156px"
    }, 500);
    i = 0;
  }
});

推荐答案

您正在重置flag变量，<每个卷轴都有code> i 。

You're resetting your "flag" variable, i on every scroll.

这是一个演示解决方法的小提琴（以及我在评论中提到的内容）： http://jsfiddle.net/px8y9/

Here's a fiddle demonstrating a workaround (and what I mentioned in the comments): http://jsfiddle.net/px8y9/

var isShowing = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
        alert("Show Footer");
        isShowing = true;
    } else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
        alert("Hide Footer");
        isShowing = false;
    }
});

这篇关于当您到达屏幕底部时，页脚会动画，但在向上滚动时无法设置动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！