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

我在我的網站上有一系列圖片，都有共同的課程。當我向下滾動窗口時，我想淡入只有當前在視口內的圖像。如何定位共享類名的特定元素？

我有工作，但到目前爲止它的全部或沒有。一旦第一個圖像進入視口，所有圖像都會淡入。理想情況下，我希望它們在進入視口時逐漸淡入。

我滾動股利 - 不使用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）相同;'' –

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

回答

相關問題