检查层级中的元素视口可见性

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 
     }; 
    };