当您到达屏幕底部时,页脚会动画,但在向上滚动时无法设置动画效果 [英] 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屋!