JQueryはY座標の後に次の要素を見つけるか？

Question

divのページはすべて同じクラスで、現在は.scrollを使用して、.scrollTopでY軸座標をリッスンして取得しています。私がしたいことは、現在の.scrollTop/Yの位置の後に来るクラス名で次のdivをターゲットにすることです。 JQueryセレクタに数値を渡して、「Y位置を開始する'.my-class'の次のdivを現在の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>