Question

我有一个任务：页面上有一些具有ID和数据标题的特定块（div / sections等）。我需要检测何时滚动这些元素之一在屏幕上方，然后console.log记录其ID和数据标题。因此，当顶部的第二个元素在控制台中需要第二个元素的id和data-title时，只有第三个元素的数据直到该元素结束。我该怎么办？

这里只是它应该如何工作的一个示例，但是现在它可以检测元素何时在视图中，但是我需要检测元素何时在屏幕顶部：

https://codepen.io/hamper/pen/NLWWjz?editors=0011

var titles = document.querySelectorAll('[data-title]');
$(window).scroll(function() {
  $(titles).each(function () {
   var $el = $(this),
    id = "#" + $el.attr("id"),
    elTopPosRelToWindow = $el.offset().top - $(window).scrollTop(),
    elBottomPosRelToWindow = $el.offset().top - $(window).scrollTop() + $el.height(),
    inView = ((elTopPosRelToWindow < $(window).height()) 
               && (elBottomPosRelToWindow > $(window).height()));  
   if(inView) {      
      console.log(this.id, this.dataset.title);
   } 
  });
});

Answer 1

签出代码笔https://codepen.io/anon/pen/bxGNjG?editors=0011

if(Math.abs($el.position().top - $(window).scrollTop()) < 5) {    
   console.log('On Top', Date.now())
}

基本上，逻辑是找到Windows滚动位置和元素之间的差异。如果值小于特定数字，则在顶部。我已将值设置为5。根据所需的精度，可以增加或减少该值。如果您快速滚动，可能会错过一些滚动位置，因此有条件检查中的范围而不是等于

检测元素何时出现在屏幕顶部

1 个答案: