检测是否滚动到元素（使用getBoundingClientRect（）;）

Question

我尝试使用getBoundingClientRect();

检测元素是否在视口中

但是我的情况我想添加一些函数当（只有一个）元素在视口上时点击一些html锚标记

时间：

• 元素的顶部＆gt; = 0
• window.scrollTop =＆lt;元素的高度

示例：

块#A（TOP = 0，HEIGHT = 200）

块#B（TOP = 200，HEIGHT = 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);
}