javascript - 迭代元素重叠/碰撞函数

Question

我有一个工作函数，可以检测方形指示器是否与具有深色背景的行重叠。如果重叠，指示器应变为白色，如果不重叠，指示器应为黑色。

我陷入困境的部分是我有很多带有深色背景的行，并且它目前仅适用于第一个深色背景，因为我没有迭代所有深色背景，而只是迭代第一个。

我尝试将每个函数放置在多个位置，但似乎无法使其工作。

jsfiddle here

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;    
 };