Javascript 检测元素何时位于绝对定位框内

我有一个框，当用户滚动页面时，我需要检测其中的元素。它还需要作出反应

我很早就让它工作了，包括窗户的高度和宽度等，但是百分比都变得很糟糕，这取决于我使用的设备。因此，我决定选择使用固定/绝对元素，然后以某种方式检测与其他元素的相交/碰撞

css的绝对元素是

#windowBox {
  position: fixed;
  top: 30%;
  bottom: 30%;
  left: 0;
  right: 0;
}

我试图让里面的元素在滚动时亮起来。此外，理想情况下……当用户单击next或prev时，让next和prev元素自动进入框/向上或向下滑动

我已经干了好几个小时了，我都快发疯了。它应该是如此简单

我试过这个，但不起作用。有点像，但不是真的。当我调整窗口大小时，它会变得一团糟。而且它也有点神经质和油嘴滑舌

显然，对于调整大小的事情，我需要重新计算百分比以使其正常工作。但我认为使用绝对元素和判断交叉点对我来说更符合逻辑

var windowHeight = $(window).height(),
  gridTop = windowHeight * .3,
  gridBottom = windowHeight * .3,
  console.log(gridTop),
  console.log(gridBottom);
$(window).scroll(function() {
  var t = $(this);
  $('.formQuestion').each(function() {
    var thisTop = $(this).offset().top - t.scrollTop();
    if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

---

你应该看看，我想这就是你要找的

如果不想使用任何类型的外部jQuery库，只需使用jQuery.offset.top来获取div的冲突

堆栈片段

$window.onscroll，函数{ $.item.eachfunction{ 如果$this.offset.top<$.middle-bar.offset.top+$.middle-bar.outerHeight&&$this.offset.top>$.middle-bar.offset.top-$this.outerHeight{ $this.addClassnewClass； }否则{ $this.removeClassnewClass； } }; }; 身体{ 保证金：0； } 梅因先生{ 利润率：300px0； } .项目{ 高度：50px； 背景：ccc； 利润率：0.50px； 位置：相对位置； 过渡：所有。5s轻松； } .中杠{ 位置：固定； 高度：50px； 背景：黑色； 左：0； 右：0； 最高：50%； 转化：translateY-50%； } .item.newClass{ 背景：红色； 变换：尺度8； }

---

你有没有尝试过与之相关的东西…？…如果有，分享代码…是的，刚刚发布。它似乎只在某些元素上起作用，而忽略/跳过了其他元素。我想我已经解决了这个问题。。。。但我会用Midnight JS，因为它很平滑，看起来很棒是的，看起来很棒，这正是我需要的，谢谢我解决了它。。。。但我可能会用这个来代替，因为它太好了