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

我在我的网站上有一系列图片，都有共同的课程。当我向下滚动窗口时，我想淡入只有当前在视口内的图像。如何定位共享类名的特定元素？

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

我滚动股利 - 不使用overflow-y: scroll;

我已经使用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) 
};

谢谢你的任何建议！

编辑

我已经更新了我的脚本以删除插件。也许这将有助于揭露我的缺陷。

EDIT 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

“21”作为日志当然事件。所以它正确地看到它。我只是没有正确的逻辑，不能立即显示所有内容......

来源

2016-04-15 Damon

'：in-viewport'选择器是否有效？我认为这些选择器是根据http://api.jquery.com/category/selectors/ –

保留的。您是对的 - 事实并非如此。它是插件的选择器。 IDK，如果我想继续使用它。 – Damon

关于$.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 
    } 
});

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

来源

2016-04-15 15:33:49 Harangue

但是OP使用'var $ chart = $（val）;'这与'var $ chart = $（this）相同;'' –

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

回答

相关问题