javascript - 检测固定元素元素和多个静态元素之间的重叠

Question

我正在尝试检测我的固定元素(固定类)与其他静态/可移动元素的重叠。根据结果​​ true/false，我正在更改固定元素的字体颜色。

所以当固定元素与黑框重叠时，它的字体颜色变为白色，否则变为黑色。我的问题是，这仅适用于第三个移动元素。

第一个和第二个移动元素也重叠，但我的固定元素的字体颜色没有改变。所以 IF 条件仅适用于第三个移动元素。

任何人都可以帮助我修复我的代码，以便我的固定元素的字体颜色在与所有三个移动元素重叠时发生变化吗？

My Pen

function collision($fixed, $moving) {
  var x1 = $fixed.offset().left;
  var y1 = $fixed.offset().top;
  var h1 = $fixed.outerHeight(true);
  var w1 = $fixed.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $moving.offset().left;
  var y2 = $moving.offset().top;
  var h2 = $moving.outerHeight(true);
  var w2 = $moving.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$(window).scroll(function() {
  $(".moving").each(function() {
    //console.log($(this));
    if (collision($(".fixed"), $(this))) {
      $('.fixed').css('color', 'white');
    } else {
      $('.fixed').css('color', 'black');
    }
  });
});

.fixed {
  color: black;
  position: fixed;
  top: 50px;
}

.moving {
  width: 400px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed">
  Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

仅仅是因为您对每一个都应用了逻辑，因此只考虑了最后一个。每一个都将更改相同元素的字体颜色，只有最后一次更改会保留。

例如，当您在第一个黑盒中时，您将测试所有三个黑盒。第一个会给出 true，第二个会给出 false，第三个会给出 false，最后一个会给出 false。这就是为什么它只适用于最后一个，因为当最后一个为真时，您将在其他两个应用黑色后得到白色。

相反，您需要应用 OR 逻辑，当一个给出 true 时您停止并且不检查其他逻辑:

function collision($fixed, $moving) {
  var x1 = $fixed.offset().left;
  var y1 = $fixed.offset().top;
  var h1 = $fixed.outerHeight(true);
  var w1 = $fixed.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $moving.offset().left;
  var y2 = $moving.offset().top;
  var h2 = $moving.outerHeight(true);
  var w2 = $moving.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$(window).scroll(function() {
      var all = $(".moving");
      for (var i = 0; i < all.length; i++) {
         if (collision($(".fixed"), all.eq(i))) {
             $('.fixed').css('color', 'white');
             break; //no need to test the others !
           } else {
             $('.fixed').css('color', 'black');
           }
         }
      });

.fixed {
  color: black;
  position: fixed;
  top: 50px;
}

.moving {
  width: 400px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed">
  Fixed Element
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="moving">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>