如何檢測元素何時滾動到視口中

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

允許在視口中檢測進入和退出。