jquery - 向上滚动时动画的元素，向下滚动时反转的元素

Question

我正在尝试做一些我确信非常简单的事情...我正在慢慢地自学 JQuery，所以我整天都在阅读论坛和谷歌搜索不同的术语，但我似乎无法让它发生!

当下面的 div 向上滚动(没问题)时，我需要标志的图像向左滑动(超出 View )...但是，我希望当用户向下滚动时操作反转。

这个 fiddle 实现了初始动画:http://jsfiddle.net/fr2Sw/

我尝试了一大堆不起作用的方法......像这样的功能:

var canSee = false;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#box").animate({left:"-=200px"});
        canSee = true;
    } else if (!canSee) {
        $("#box").animate({left:"=0px"});
    }
});

非常感谢，非常感谢您的帮助!如果您不介意，请“用英语”解释每个函数中发生的情况:o)

Answer 1

也许是这样的:

var canSee = true;

$(window).scroll(function() {
    if ($(this).scrollTop() > 100 && canSee) {
        $("#box").animate({left:"-=200px"});
        canSee = false;
    } else if ($(this).scrollTop() <= 100 && !canSee) {
        $("#box").animate({left:"+=200px"});
        canSee = true;
    }
});

将casSee初始化为true，因为用户可以看到图像。当用户滚动时，执行以下操作:

如果Windows的scrollTop超过100并且图像仍然可见，则通过将其向左滑出屏幕来隐藏它，所以它只发生一次——它永远不会滚动超过200px。当用户向后滚动时，如果图像超出视口(viewport)并且 canSee 设置为 false，则将图像滑回视口(viewport)并将 canSee 设置为 true，因为用户可以看到它。