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

Question

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

当以下 div 向上滚动（没问题）时，我需要标志的图像向左滑动（看不见）......但是，当用户向下滚动时，我希望动作反转。

这个小提琴实现了初始动画：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

Maybe something like this:

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

Initialize casSee to true, because the user can see the image. When the user scrolls, do the following:

If the Windows's scrollTop is over 100 and the image is still visible, hide it by sliding it left out of the screen, so it only happens once--it will never scroll beyond 200px. When the user scrolls back up, if the image is out of the viewport and canSee is set to false, slide the image back in and set canSee to true, because the user can see it.

Answer 2

如果您只想在滚动条位于顶部时显示图像，请使用以下命令：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() === 0) {
            $("#box").animate({
                left: "0px"
            });
        } else if ($("#box").css("left") == "0px") {
            $("#box").animate({
                left: -$("#box").width()
            });
        }
    });
});