Итерация элемента перекрытия / столкновения

Question

У меня есть рабочая функция, которая определяет, перекрывается ли квадратный индикатор строкой с темным фоном.Если он перекрывается, индикатор должен стать белым, если нет, индикатор должен быть черным.

Я застрял в том, что у меня много строк с темным фоном, и в настоящее времяЯ работаю только с первым темным фоном, потому что я не перебираю все темные фоны, а только первый.

Я пытался разместить каждую функцию в нескольких местах, но не могу заставить ее работать,

jsfiddle здесь

function isColliding() {
    // Div 1 data
    var indicator_offset = $('.indicator').offset();
    var indicator_height = $('.indicator').outerHeight(true);
    var indicator_width = $('.indicator').outerWidth(true);
    var indicator_distance_from_top = indicator_offset.top + indicator_height;
    var indicator_distance_from_left = indicator_offset.left + indicator_width;

    // Div 2 data
    var dark_row_offset = $('.dark').offset();
    var dark_row_height = $('.dark').outerHeight(true);
    var dark_row_width = $('.dark').outerWidth(true);
    var dark_row_distance_from_top = dark_row_offset.top + dark_row_height;
    var dark_row_distance_from_left = dark_row_offset.left + dark_row_width;

    var not_colliding = (indicator_distance_from_top < dark_row_offset.top || indicator_offset.top > dark_row_distance_from_top || indicator_distance_from_left < dark_row_offset.left || indicator_offset.left > dark_row_distance_from_left);

    return !not_colliding;
};

$(window).on('scroll', function() {
	if (isColliding()) {
  	$('.indicator').removeClass('on-light').addClass('on-dark');
  } else {
    	$('.indicator').removeClass('on-dark').addClass('on-light');
  }
})

.row {
  height: 200px;
  width: 100%;
}
.row.light {
  background-color: #eeeeee;
}
.row.dark {
  background-color: black;
}

.indicator {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 0px;
  left: 50%;
  transfrom: translateX(-50%);
}
.indicator.on-light {
  background-color: black;
}
.indicator.on-dark {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="indicator on-light">

</div>

<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>

Answer 1

Ваш код проверяет только первый «темный» элемент, а не просматривает все темные элементы.Поэтому измените ваш метод, как показано ниже, чтобы он работал https://jsfiddle.net/x5fw2z3s/. Я уверен, что вы можете оптимизировать его.

 function isColliding() {
 // Div 1 data
 var indicator_offset = $('.indicator').offset();
 var indicator_height = $('.indicator').outerHeight(true);
 var indicator_width = $('.indicator').outerWidth(true);
 var indicator_distance_from_top = indicator_offset.top + indicator_height;
 var indicator_distance_from_left = indicator_offset.left + indicator_width;

 var isCollidingAtLeastOneDark = false;

 $( '.dark' ).each(function( index ) {       
   var dark_row_offset = $(this).offset();
   var dark_row_height = $(this).outerHeight(true);
   var dark_row_width = $(this).outerWidth(true);
   var dark_row_distance_from_top = dark_row_offset.top + dark_row_height;
   var dark_row_distance_from_left = dark_row_offset.left + dark_row_width;

   var not_colliding = (indicator_distance_from_top < dark_row_offset.top || indicator_offset.top > dark_row_distance_from_top || indicator_distance_from_left < dark_row_offset.left || indicator_offset.left > dark_row_distance_from_left);

    if( !not_colliding) {
       isCollidingAtLeastOneDark = true;
       return false; //breakout from loop
    }
 });
  console.log(isCollidingAtLeastOneDark);
  return isCollidingAtLeastOneDark;    
 };