JSFiddle - React, Tailwind, and code Playground

by Paul Sijpkes

HTML

<div class="examples">1</div>
<div class="examples">2</div>
<div class="examples">3</div>
<div class="examples">4</div>
<div class="examples">5</div>
<div class="examples">6</div>
<div class="examples">7</div>
<div class="examples">8</div>
<div class="examples">9</div>
<div class="examples">10</div>
<div class="examples">11</div>
<div class="examples">12</div>
<div class="examples">13</div>
<div class="examples">14</div>
<div class="examples">15</div>

CSS

.examples {
    width: 400px;
    height: 400px;
    background-color: black;
    margin: 3px;
    color: white;
}

JavaScript

$(window).scroll(function () {
            var contentPosition = [];
            $('.examples').each(function () { //Get elements that have an id=
                contentPosition.push($(this).data('position')); //add id to array
                
                  var top = $(this).offset().top - $(document).scrollTop();
            if (top < 400) {
                console.log('COMBO BREAKER '+$(this).text());
            }
            });

          
        });