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

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

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

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

总结

以上是内存溢出为你收集整理的javascript – jQuery – 检查元素是否进入视图,淡化那些元素全部内容，希望文章能够帮你解决javascript – jQuery – 检查元素是否进入视图,淡化那些元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。