Javascript jQuery-检测元素是否在视口中

我正在写一个脚本，当不同的元素出现在屏幕上时，会给它们一些动画

第一步是检测它们何时出现在屏幕上。但这似乎不起作用

我尝试的是：

-在

.visible（）

选择器中，我很快发现这在jQuery中起到了其他作用

-不同的插件，但我发现它们比我需要的更多，所以我决定自己写/找到一些东西

-我当前的脚本（我在论坛的某个地方找到了它，并决定根据我的需要进行编辑），但它的工作原理有点奇怪

$.fn.isInViewport = function () {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function () {
    if ($('.blogcard ').isInViewport()) {
        $(this).addClass("test");
        console.log('success.')
    } else {
        console.log('No success.')
    }
});

$.fn.isInViewport=函数（）{
让elementTop=$（this）.offset（）.top；
让elementBottom=elementTop+$（this.outerHeight（）；
让viewportTop=$（窗口）.scrollTop（）；
让viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop

不幸的是，这似乎没有将类添加到我的

中。您使用“this”的目标窗口不是。blogcard元素：

$(window).scroll(function () {
    if ($('.blogcard ').isInViewport()) {
        //  Use .blogcard instead of this
        $('.blogcard').addClass('test');
        console.log('success.')
    } else {
        //  Remove class
        $('.blogcard').removeClass('test');
        console.log('No success.')
    }
});

请尝试此代码。。。

$（窗口）。滚动（函数（）{
如果（$（'.section3'）.isInViewport（））{
$（'.section3'）.addClass（'its-now-view'）；
警报（“场景3现在在视口中”）；
}否则{
$（'.section3'）.addClass（'its-now-view'）；
警报（“屏幕3不在视口中”）；
}
});
部分{
高度：400px；
}
.第1节{
背景色：#333；
}
.第2节{
背景色：红色；
}
.第3节{
背景颜色：黄色；
}
.第4节{
背景颜色：绿色；
}

视口演示
第1节的内容

第2节的内容

第3节的内容

第4节的内容

您需要在$（窗口）中获取“this”上下文。滚动功能。我是通过循环元素来实现的，而不是仅仅检查.class是否为isInViewport（）

删除该类会使内容过于生动，因此我将其删除。
您的逻辑缺少几个场景。尝试Roko的答案尝试先获取视口位置范围和元素位置范围？那么，计算范围内的元素。谢谢，我没有注意到。还有一个问题；现在它只给所有
.blogcards
类测试。即使它们不在视口中。如果它们不在视口中，则需要删除该类。您保存了我的Repo，谢谢。
$(window).scroll(function () {
   $('.blogcard').each(function(i, el){

      if ($(this).isInViewport()) {
          $(this).addClass('test');
          console.log('content block is in viewport.', $(this))
      } 
   })

});