Detect overlapping between fixed item element and multiple static elements

Question

I am trying to detect overlapping of my fixed element(with class fixed) with other static/moveable elements. Based on the result true/false I am changing the font color of my fixed element.

So when fixed element overlaps a black box the font color of it becomes white and black otherwise. My problem is, this is working only with the third moving element.

First and second moving element is overlapping too but the font color of my fixed element is not changing. So the IF condition is only working for the third moving element.

Can anyone help me to fix my code, so that my fixed element's font color changes while overlapping all three moving elements?

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

Simply because your apply the logic for each one and thus only the last one is considered. Each one will change the font color for the same element and only the last change will remain.

For example, when you are in the first black box you will test all the three. The first will give true, the second false, the third false and you will endup with false because it's the last. That's why it only works with the last because when the last gives true, you will get the white color after the other two have applied the black color.

Instead you need to apply an OR logic and when one gives true you stop and don't check the others:

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>