JavascriptをgetBoundingClientRect（） - クラス

Question

の複数のインスタンスに適用され、私は要素がビューポートであるかどうかを検出する機能を使用しようとしてきた：

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です：jqueryのeachを使用してhttp://jsfiddle.net/azjbrork/6/

Answer 1

我々は.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>