Question

我的网站上有一系列共享同一类的图像。当我向下滚动窗口时，我想淡入仅当前在视口中的图像。

我所拥有的是工作，但到目前为止它是全有或全无。一旦第一个图像进入视口，所有图像都会淡入。理想情况下，我希望它们在进入视口时逐个淡入淡出。

我正在使用overflow-y: scroll;

滚动div而不是实际窗口

我尝试使用viewport插件，但我仍然得到相同的结果。

这是我用来监听图像中的滚动+淡入淡出的jQuery。我理解为什么它一下子做了 - 我只是挂着如何将每个图像从图像阵列（类）中分离出来。

$('.section-container section:nth-child(2)').scroll(function () {
    $('.img-chart').each(function (key, val) {
        var $chart = $(val); // Give me a jquery object of the element(s).
        var src = $chart.prop('src');

        if (isInView($chart)) {
            console.log('in view: ' + $chart); // this is returning every image. I would like to get only the one that is currently in the viewport.
            // Do stuff with the $chart element.    
        }
    });
});


var isInView = function ($element) {
    var win = $(window);
    var obj = $element;
    var scrollPosition = win.scrollTop();
    var visibleArea = win.scrollTop() + win.height();
    var objEndPos = (obj.offset().top + obj.outerHeight());

    return (visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};

感谢您的任何建议！

修改

我＆＃39;已更新我的脚本以删除插件。也许这有助于揭露我的缺陷。

编辑2

似乎是在视口中查看特定图像的时间。滚动后，我会看到这一点（记录视图中的内容）。

in view: http://farmersdeliver.dev/assets/img/img01.png
in view: http://farmersdeliver.dev/assets/img/img02.png
in view: http://farmersdeliver.dev/assets/img/img03.png

这导致所有具有该类的图像淡入。当我继续滚动到图像实际在视图中的位置时，我明白了：

[21] in view: http://farmersdeliver.dev/assets/img/img01.png
in view: http://farmersdeliver.dev/assets/img/img02.png
in view: http://farmersdeliver.dev/assets/img/img03.png

＆＃34; 21＆＃34;当然是日志事件。所以它看得正确。我只是没有正确的逻辑，不能立即显示所有内容或某事......

Answer 1

关于$.each的好处是this绑定到迭代器中的当前元素。

$('.img-chart:in-viewport').each(function (key, val) {
    if ($(this).offset().top + < $(window).scrollTop()) { // If top of element is in view
        // Your other conditions
        $(this).show(); //Or whatever you need to do
    }
});

查找元素是否在视图中就像检查窗口滚动的偏移一样简单。

如何定位共享类名的特定元素？

1 个答案: