JQuery найти следующий элемент после координаты Y?

Question

Скажем, у меня есть страница div, у которой все одинаковые классы, и я в настоящее время использую .scroll для прослушивания и получения координаты оси Y через .scrollTop. То, что я хочу сделать, - это нацелиться на следующий div с именем класса после текущей позиции .scrollTop/Y. Есть ли способ передать числовое значение в селектор JQuery, чтобы сказать «найти следующий div с '.my-class', который начинает позицию Y больше текущей позиции Y»?

Answer 1

Это должно сделать это за вас. Код прокомментирован ниже.

$(window).on('scroll', function(){ 
 
    // with '.my-class' 
 
    $('.my-class').removeClass('active') 
 
    // who's beginning Y position is greater than current Y position 
 
    .filter(function(){ 
 
    return $(this).offset().top > $(window).scrollTop(); 
 
    }).first() 
 
    // find the next div 
 
    .next() 
 
    // do stuff 
 
    .addClass('active'); 
 
}).trigger('scroll');

body {background: #fff;} 
 
.my-class { 
 
    padding: 2em; 
 
    border: 1px solid #eee; 
 
    margin: 1em; 
 
    border-radius: 1em; 
 
} 
 
.my-class.active { 
 
    border-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div> 
 
<div class="my-class">Test</div>