javascript - 如何检测元素何时滚动到视口(viewport)中

Question

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

如何检测我的横幅广告(id 为 #footer-banner)已进入视口(viewport)？我希望只有在横幅的整个高度可见时才检测到它。

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