Question

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

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

Answer 2

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

然后你可以将参数附加到任何标签，所以例如你说你正在淡出一个你可以有一个像img标签的图像

<img src="img/blur/llhs_cake.png" alt="" height="115" width="118" class="overlay" id="llhs_cake" data--bottom-bottom="opacity:0;" data--top-top="opacity:0" data--top-top data--center-center="opacity=1">

格式

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

所以它使用 - 来绕过偏移参数。

我认为如果您使用jquery将其附加到类似

之类的内容，这是实现您所寻找内容的最简单方法

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

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

这些来源也可能对您有所帮助： How to update (append to) an href in jquery?

Fade out element, when user reach the bottom of the screen

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

2 个答案: