jQuery在Y坐标之后找到下一个元素？

Question

假设我有一个div页面，它们都具有相同的类，并且我当前正在使用.scroll来通过.scrollTop监听和检索Y轴坐标。 我想做的是使用当前.scrollTop / Y位置之后的类名来定位下一个div。 有没有一种方法可以将数值传递给JQuery选择器，使其说“以'.my-class'查找下一个div，其起始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>