javascript - 检测是否滚动到元素（使用 getBoundingClientRect(); ）

Question

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

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

什么时候 ：

• 元素的顶部 >= 0
• window.scrollTop =< 元素的高度

例子 ：

块#A（顶部=0，高度=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);
}