JQuery查找下一个元素后的Y坐标

JQuery find next element after Y coordinate?

本文关键字：坐标 元素 查找 下一个 JQuery      更新时间：2023-09-26

假设我有一个div页面，它们都具有相同的类，并且我目前使用。scroll来通过。scrolltop侦听和检索Y轴坐标。我想做的是目标下一个div与类名后当前。scrolltop/Y位置。是否有一种方法来传递一个数值的JQuery选择器说"找到下一个div与'.my-class'谁的开始Y位置大于当前Y位置"?

这应该可以帮你完成。下面注释了代码。

$(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>

相关文章：