Question

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

到目前为止，这是我的代码。这样可以正确地为页脚添加动画，但不会向下调整：

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

Answer 1

您正在重置每个卷轴上的“标志”变量i。

这是一个演示解决方法的小提琴（以及我在评论中提到的内容）：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;
    }
});

当您到达屏幕底部时，页脚会动画，但在向上滚动时无法设置动画效果

1 个答案: