javascript – jQuery – 检查元素是否进入视图,淡化那些元素

发布时间：2020-12-14 22:53:43 所属栏目：资源来源：网络整理

导读：当我知道要指定哪个元素时,我找到了这个问题的答案,但我正在寻找的方法是检查滚动是否有任何具有特定类的元素进入视图,并修改它们(例如,改变不透明度只有那些进入视野的人).我知道代码可能看起来与此类似,但我无法使其工作： jQuery(window).on("scroll",fu

当我知道要指定哪个元素时,我找到了这个问题的答案,但我正在寻找的方法是检查’滚动’是否有任何具有特定类的元素进入视图,并修改它们(例如,改变不透明度 – 只有那些进入视野的人).我知道代码可能看起来与此类似,但我无法使其工作：

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);

}
});

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

最佳答案

借用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);
        }
    });
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!