检测是否滚动到元素(使用 getBoundingClientRect(); )

Question

我尝试通过使用getBoundingClientRect（）来检测元素是否在视口中;

但是我的情况是，当（只有一个）元素在视口上时，我想添加一些功能，例如单击一些html锚标记

什么时候：

• 元素的前>= 0
• 窗口.滚动顶部 =<元素的高度>

例：

区块#A （顶部=0， 高度=200）

区块#B （顶部=200， 高度=450）

区块#C （TOP=450， HEIGHt=600）

当顶部视口为 100 时，我将对 Block#A 做一些事情

到目前为止，我的代码：

$(window).scroll(function() {
  var elements = $('.block');
  var len = elements.length;
  for(var i=0;i<len;i++){
    var element = elements[i];
    var rect = element.getBoundingClientRect();
    var statement = 'i have no idea';
    if(statement) {
         element.doSomething();
         break;
    }
  }
});

游乐场 ： http://jsfiddle.net/5LK3U/

Answer 1

完成此操作：

function ViewportDetect(el) {
    var rect = el.getBoundingClientRect();
    return rect.bottom > 0 && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}