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

也许是这样的：

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。当用户向上滚动时，如果图像不在视口中并且canSee设置为false，则将图像重新滑入并将canSee设置为true，因为用户可以看到它。

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

向上滚动动画的元素，向下滚动反向动画

2 个答案: