1

我一直在尝试使用一个函数来检测一个元素是否在视口中：

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}
var s= $('.special'),
    y = $('.status');

$(window).on('scroll resize', function(){
    if(isElementInViewport(s))
    {
        setTimeout(function(){
            if(isElementInViewport(s))
            {
            var offer_id = s.data("offer-id");
          alert(offer_id);
            y.text('Yes');
        }
      }, 3000);
    }
    else
    {
        y.text('No');
    }
});

不幸的是，这似乎只适用于“特殊”类的第一个实例。如何让它适用于该类的所有实例？

请注意，我添加了 3 秒延迟，以防止快速滚动触发它。

这是我进步的 jsfiddle：http: //jsfiddle.net/azjbrork/6/

4

1 回答 1

2

使用 jquery each，我们可以在类的每个实例上运行该函数.special并相应地报告（下面的片段）：

function isElementInViewport(el) {
  var rect = el[0].getBoundingClientRect();
  return (rect.top > -1 && rect.bottom <= $(window).height());
}
var s = $('.special'),
  y = $('.status');

$(window).on('scroll resize', function() {
  s.each(function() {
    var $this = $(this);
    if (isElementInViewport($this)) {
      setTimeout(function() {
        if (isElementInViewport($this)) {
          var offer_id = $this.data("offer_id");
          // advise using an underscore instead of a hyphen in data attributes
          //      alert(offer_id); // reported in text below
          y.text('Yes : ' + offer_id);
        }
      }, 200);
    } else {
      //    y.text('No'); // omit this line otherwise it will always report no (subsequent out of screen divs will overwrite the response)
    }
  });

});
.special {
  width: 80px;
  height: 20px;
  border: 1px solid #f90;
  margin-top: 200px;
}
.status {
  position: fixed;
  right: 2em;
  top: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='special' data-offer_id='a'></div>
<div class='special' data-offer_id='b'></div>
<div class='special' data-offer_id='c'></div>
<div class='special' data-offer_id='d'></div>
<div class='special' data-offer_id='e'></div>
<div class='special' data-offer_id='f'></div>


<div class='status'></div>

于 2017-02-11T17:32:29.727 回答