javascript - 使用 jQuery 向下滚动到图像底部时使用图像在 div 中设置动画

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。这很可能是不正确的。您可能只想检查并查看用户是否滚动了 过去 500 像素。

考虑改变:

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

到:

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

此外，请注意:

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

如果您使用任何依赖窗口滚动事件的库，除了您自己的事件之外，您还需要解除所有这些事件的绑定(bind)。

考虑重构为如下内容:

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