JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<br><br><br><br><br><br><br><br>

<div class=promote data-id=1>div 1</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=2>div 2</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=3>div 3</div>

<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<div class=promote data-id=4>div 4</div>

JavaScript

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
};


$(window).scroll(function(){
  if (elementInView($('.promote'))) { //how to get any promote, not only the first? show alert only once per promote seen?
    var dataid = $('.promote').data("id"); //how to get data-id of the active class?
    alert(dataid);
  }
});