Question

我有静态图像，当用户滚动到它们的底部（矩形的底部）时，我想要动画。我尝试过使用代码：

       $(window).on("scroll", function(){
        if($("body").scrollTop() === 500){
            $(window).off("scroll");
            //Do stuff here
            $('.context_right').fadein(4000);
        }
    });

使用.context_right包含我想要从屏幕右侧滑入的图像。我在Chrome调试器中对此进行了测试，但根本没有动画，我无法理解为什么在向下滚动时没有被触发。

Answer 1

您正在检查窗口的滚动位置是否完全等于500px。这可能是不正确的。您可能只想检查并查看用户是否已滚动过去 500px。

考虑改变：

if($("body").scrollTop() === 500)

为：

if($("body").scrollTop() >= 500)

另外，请注意：

$(window).off("scroll");

如果您使用任何依赖于窗口滚动事件的库，除了您自己的事件外，您将解除所有这些事件的绑定。

考虑重构以下内容：

var scrollAnimateIn = function(){
    if($("body").scrollTop() >= 500){
        $(window).off("scroll", scrollAnimateIn);
        //Do stuff here
        $('.context_right').fadein(4000);
    }
};
$(window).on("scroll", scrollAnimateIn);

使用jQuery向下滚动到图像底部时，使用图像对div进行动画处理

1 个答案: