如何检测元素何时滚动到视口中

Question

我的网站底部有一个横幅广告。我使用Google Analytics事件来跟踪展示次数。问题是，如果用户没有滚动到底部，他们就不会看到横幅。因此，记录展示会导致不准确，除非我可以等到横幅在视口中。

如何检测到我的横幅广告（id #footer-banner）已进入视口？如果只有横幅的整个高度可见时才会被检测到，我更喜欢。

Answer 1

使用jQuery，您可以：

function isInView() {
  var y = $('foot-banner').position().top;
  var windowY = $(window).scrollTop();
  return y > windowY && y < windowY + $(window).height();
}

然后在触发滚动事件时可以使用此功能：

var impressionRecorded = false;
$(document).scroll(function() {
  if (isInView() && !impressionRecorded) {
     impressionRecorded = true;
     // record impression
  }
});

Answer 2

我使用了一个插件： https://github.com/thesmart/jquery-scrollspy

允许在视口中检测进入和退出。