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

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

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

借用检查元素在滚动后是否可见并使用jQuery将DIV置于屏幕中心以检查元素是否在屏幕的可视中心：

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

Answer 2

我使用skrollr.js插件来实现这一点，这是在github https://github.com/Prinzhorn/skrollr

然后你可以将参数附加到任何标签，例如，假设你淡出了一个你可以有img标签的图像

格式化

 data-[offset]-(viewport-anchor)-[element-anchor] 

所以它正在使用 – 绕过偏移参数。

我认为这是实现你所寻找的最简单的方法，如果你然后使用jquery附加类似的东西

 $('*').attr("data--bottom-bottom="opacity:0;" data--top-top="opacity:0" data--top-center="opacity=1""); 

我在手机上，所以我现在无法测试，但我相信它应该有所帮助，如果不是，至少可以给你一个新的尝试途径！

这些来源也可能对你有所帮助： 如何在jquery中更新（追加）一个href？

当用户到达屏幕底部时淡出元素