Question

当用户滚动到页面上的某个部分时，我有3张图片会自动向右移动（使用CSS转换）。

我的代码的问题在于它激活了＃34;向右移动＆＃34;太早了，即使你甚至看不到图像。如果我重新加载页面并且只停留在应该移动的图像上，并向上或向下滚动它可以正常工作。

我认为滚动功能的激活存在问题... 是否可以说移动图像的css类在某个高度被激活？

这是我目前的代码：

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

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

    if (y >= 600) {

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

Answer 1

您可以检查元素是否在视口中，如下所示：How to tell if a DOM element is visible in the current viewport?

当窗口加载或滚动时，您可以运行检查并滚动它是否为真。由于图像都在相同的y坐标上，您可以使用第一个元素进行检查：＃number1。

滚动功能在看到元素时激活

1 个答案: