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

Question

我有一个盒子，当用户滚动页面时，我需要检测元素何时在其中。它还需要响应。

我之前有过工作，窗户高度和宽度等，但百分比变得全部搞砸了，这取决于我所使用的设备。所以我决定选择使用固定/绝对元素，然后以某种方式检测与其他元素的交叉/碰撞。

绝对元素css是

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

我试图让它内部的元素在滚动时亮起来。而且，理想情况下......当用户点击next或prev时，下一个和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');
    }
  });
});

Answer 1

如果您不想使用任何类型的外部jQuery库...只需使用 jQuery .offset().top来获取div的碰撞

Stack Snippet

＆＃13;

＆＃13;

$(window).on("scroll", function() {
  $(".item").each(function() {
    if ($(this).offset().top < $(".middle-bar").offset().top + $(".middle-bar").outerHeight() && $(this).offset().top > $(".middle-bar").offset().top - $(this).outerHeight()) {
      $(this).addClass("newClass");
    } else {
      $(this).removeClass("newClass");
    }
  });
});

＆＃13;

body {
  margin: 0;
}

.main {
  margin: 300px 0;
}

.item {
  height: 50px;
  background: #ccc;
  margin: 0 0 50px;
  position: relative;
  transition: all .5s ease;
}

.middle-bar {
  position: fixed;
  height: 50px;
  background: black;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.item.newClass {
  background: red;
  transform: scale(.8);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle-bar"></div>
<div class="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你应该看看Midnight.js，这就是你想要的东西。