javascript - jQuery - 检测元素是否在视口(viewport)中

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