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

Question

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

第一步是检测它们何时进入屏幕。但这似乎不起作用。

我试过的：

-.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.')
    }
});

不幸的是，这似乎没有向我的<div class='blogcard'>.

Answer 1

您对“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.')
    }
});