javascript - jQuery - 检查元素是否出现在 View 中，淡入那些出现的元素

Question

当我知道要指定哪个元素时，我找到了这个问题的答案，但我正在寻找一种方法来检查“滚动”是否具有特定类的任何元素已进入 View ，并修改它们正如他们所做的那样(例如改变不透明度 - 只有那些进入视野的)。我知道代码可能看起来与此类似，但我无法让它工作:

jQuery(window).on("scroll", function() {
var difference = jQuery(window).offset().top + jQuery(window).height()/2;
if (difference > jQuery(".makeVisible").offset().top) {
     jQuery(this).animate({opacity: 1.0}, 500);

}
});

非常感谢。注意:存在变量差异是因为我希望元素在到达屏幕中间时变得可见。

Answer 1

借自Check if element is visible after scrolling和 Using jQuery to center a DIV on the screen检查元素是否在屏幕的可见中心:

function isScrolledIntoView(elem)
{
    var centerY = Math.max(0,((jQuery(window).height()-jQuery(elem).outerHeight()) / 2) 
                  + jQuery(window).scrollTop());

    var elementTop = jQuery(elem).offset().top;
    var elementBottom = elementTop + jQuery(elem).height();

    return elementTop <= centerY && elementBottom >= centerY;
}

然后我们可以将您的方法修改为:

jQuery(window).on("scroll resize", function() {
    jQuery(".makeVisible").each(function(index, element) {
        if (isScrolledIntoView(element)) {
           jQuery(element).animate({opacity: 1.0}, 500);
        }
    });
});