javascript - 看到元素时滚动功能激活

Question

当用户滚动到页面上的特定部分时，我有 3 张图片自动向右移动(使用 CSS 转换)。

我的代码的问题在于它过早地激活了“向右移动”，即使您甚至看不到图像。如果我重新加载页面并只停留在应该移动的图像上，然后向上或向下滚动它就可以正常工作。

我认为滚动功能的激活有问题......可以说移动图像的css类在特定高度被激活吗？

这是我当前的代码:

$(window).scroll(function(event) {

    var y = $(this).scrollTop();

    if (y >= 600) {

        $('#number1').addClass('animate');
        $('#number2').addClass('animate');
        $('#number3').addClass('animate');
    }
});

Answer 1

您可以像这样检查元素是否在视口(viewport)中:How to tell if a DOM element is visible in the current viewport?

如果在窗口加载或滚动时为真，您可以运行检查和滚动。由于图像都在相同的 y 坐标上，您可以使用第一个元素进行检查:#number1。