檢查層級中的元素視口可見性

Question

我需要檢查在不同「可見性級別」的視口中是否存在可見的元素。我知道如何檢查它是否可見，但是這次我需要一個指示元素可見度的指標。把它想象成3種顏色：綠色，黃色和紅色。綠色100％可見，紅色完全不可見。

有沒有人有關於如何爲此編寫jQuery或Javascript的任何想法？

編輯：0到100也是一個很好的指標。 0爲0％可見，100爲100％可見。

Answer 1

幸運的是，我不得不開發差不多你想要什麼。這是一個jQuery擴展，告訴你一個元素相對於瀏覽器窗口的可見性。它返回一個具有兩個屬性的對象，水平和垂直。如果垂直值爲-1，則元素不可見並且在視口上方。如果它是0，那麼它是可見的。如果結果爲1，則隱身但在視口下。同樣用於水平。

區別在於'0'不能區分'完全在視口中'或部分在視口中。我需要它來確定是否在視口的上方，下方或下方（左側和右側相同）。不過，這是一個很好的開始，它可以很容易地改變到你需要的東西。

jQuery.fn.viewportPosition = function() { 
     var $window = $(window); 
     var position = this.offset(); 
     var viewport = { bottom: $window.height(), right: $window.width() }; 
     var rect = { top: position.top, left: position.left, bottom: position.top + this.height(), right: position.left + this.width() }; 
     return { 
      vertical: (rect.bottom < 0) ? -1 : (rect.top > viewport.bottom) ? 1 : 0, 
      horizontal: (rect.left < 0) ? -1 : (rect.left > viewport.right) ? 1 : 0 
     }; 
    };