jquery - 当元素位于视口(viewport)中时对其进行动画处理

Question

正如目前在很多网站上看到的那样，我想在元素进入视口(viewport)或距视口(viewport) 100px 等时对其执行一些操作。

我已经寻找了很长时间，但到目前为止没有任何效果。

我有一个元素列表，高 500 像素，宽 100%。我对动画等以及我将如何处理它们感到满意，只需要在它们进入 View 时触发一些帮助。

我的目标是为元素提供一个动画元素类，然后能够使用该类来检查它是否在 View 中。

伪代码:

$(window).on('scroll', function() {
    if (element is in the viewport) {
        $(this).doSomething();
    }
});

我似乎很懒，但我已经寻找了太久但没有成功。

任何先前的尝试总是在不断滚动时触发，因此即使元素不在视口(viewport)中并且我正在设置控制台日志，当滚动一点点时我也会有 100 条日志。

Answer 1

我最近为另一个答案创建了类似的解决方案。

JS 跟踪窗口的滚动，并比较窗口滚动的距离，与 offset().top 相比(跟踪该元素距离页面顶部的距离) )。如果窗口滚动位于元素顶部的 -300px 范围内，它将从左侧淡入/动画动画。

JS:

var $win = $(window);
var $stat = $('.animation-element'); // Change this to affect your desired element.

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $stat.each(function () {
        var $self = $(this);
        var prev=$self.offset();
        console.log(scrollTop);
        console.log(prev.top);
        if ( (scrollTop - prev.top) > -300) {
          $self.css('opacity', '1').addClass('animated fadeInLeft ');
        } else {
          console.log('n');
        }

    });

}).scroll();

这是正在运行的 JSfiddle — 向下滚动以查看元素滑入。 https://jsfiddle.net/wigster/5dbt7ft3/1/