選擇觸摸視口頂部邊緣的元素的有效方法

Question

在頁面滾動時，選擇觸摸瀏覽器窗口視口頂部邊緣的元素的計算效率高的方法是什麼？

查看相關圖片。選擇綠色元素是因爲它們觸摸了頂部邊緣。

UPDATE

的我怎麼會用一個例子，這是淡化那些即將關閉屏幕元素。頁面上可能有數百個。想象一下像Pinterest這樣的頁面。以滾動事件的速度計算數百個偏移量和scrollTop，即使節流仍感覺效率低下。

Answer 1

這就是我想出來的。我認爲可以通過緩存scrollTop值來改善，但這非常好。我已經包含了緩存boxtops的框架，但不包括實現代碼。我也只實現了向下滾動以隱藏div。我已經把它們重新渲染成爲練習。

當窗口滾動時，我們得到最後一個隱藏的div。我們知道在div之前的所有內容都已經隱藏起來了。然後使用'下一個元素離開屏幕'隱藏它。只要div沒有離開屏幕，我們就會中止。從而節省迭代整個列表的時間。

http://jsfiddle.net/kkv3h/2/

//track whether user has scrolled up or down 
var prevScrollTop = $(document).scrollTop(); 

$(document).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > prevScrollTop) { 
     //down 
     var lasthiddenbox = $('.fadeboxhidden:last'); 
     var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first'); 
     while (nextbox.length) { 
      console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop); 
      if (nextbox.offset().top < currentScrollTop) { 
       nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden'); 
      } 
      else { return; } 
      nextbox = nextbox.next('.fadebox:first'); 
     }   
    } else { 
     //up   
    } 
    prevScrollTop = currentScrollTop ; 
}); 

//create an object to hold a list of box top locations 
var boxtops = new Object; 


//gather all boxes and store their top location 
$('.fadebox').each(function(index) {  
    //you may want to dynamically generate div ids here based on index. I didn't do this 
    //because i was already using the id for positioning. 
    var divid = $(this).prop('id'); 
    boxtops[divid] = $(this).offset().top; 
    //console.log(boxtops[divid]);  
}); 

Answer 2

我在想最好的方法是，你可以標記你想要通過某些類來確定命中測試的元素，比如說「hit-test-visible」或其他東西。然後，對於這些元素，在滾動事件中，應該能夠找到與文檔相比較的偏移量 - 請參閱jQuery offset，然後基於滾動值，如果偏移量小於滾動量，並且偏移量+元素高度大於滾動偏移量，則該元素應該「觸摸」頂部邊緣。