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

scroll function activate when seeing element

本文关键字:元素 激活 功能 滚动      更新时间:2023-09-26

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

我的代码的问题是,它激活"移动到右边"太早,即使你甚至不能看到图像。如果我重新加载页面,只停留在应该移动的图像上,并向上或向下滚动,它会工作得很好。

我认为有一个问题与激活滚动功能…有没有可能说移动图像的css类在某个高度被激活?

这是我当前的代码:

$(window).scroll(function(event) {
    var y = $(this).scrollTop();
    if (y >= 600) {
        $('#number1').addClass('animate');
        $('#number2').addClass('animate');
        $('#number3').addClass('animate');
    }
});

你可以像这样检查一个元素是否在视口中:如何判断一个DOM元素是否在当前视口中可见?

当窗口加载或滚动时,您可以运行检查并滚动。由于图像都在相同的y坐标上,你可以使用第一个元素来检查:#number1.