Определить, когда несколько статических элементов перекрывают фиксированное положение элемента при прокрутке

Question

Я пытаюсь изменить цвет фиксированного элемента (.logo) при прокрутке поверх темного изображения (.image).Я сталкивался с этим решением:

Обнаружение, когда статический элемент перекрывает фиксированное положение элемента на прокрутке

, который работает только для одного изображения.Но что, если я хочу изменить цвет фиксированного элемента, когда при прокрутке передаются все изображения с классом изображений с помощью querySelectorAll?

Я попытался решить эту проблему с помощью forEach, но фиксированный элемент меняет цвет только напоследнее изображениеМожет кто-нибудь объяснить это поведение, на мой взгляд, это должно работать?

https://codepen.io/bosbode/pen/GaJNKr

HTML

<p class="logo">Logo</p>
<div class="image"></div>
<div class="image"></div>

CSS

body {
  text-align: center;
  height: 100%;
  font-size: 1.5rem;
}

.image {
  width: 800px;
  height: 600px;
  background: blue;
  margin: 100px auto;
}

.logo {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0)
}

JavaScript

const logo = document.querySelector('.logo');
const images = document.querySelectorAll('.image');

window.addEventListener('scroll', function () {

  const a = logo.getBoundingClientRect();

  images.forEach((item, index) => {

    const b = item.getBoundingClientRect();

    if (a.top <= (b.top + b.height) && (a.top + a.height) > b.top) {
      logo.style.color = 'white';
    } else {
      logo.style.color = 'black';
    }
  })

});

Answer 1

for (var i = 0; i < images.length; i++) {
    var item = images[i]
    let b = item.getBoundingClientRect();

    if (a.top <= (b.top + b.height) && (a.top + a.height) > b.top) {
        logo.style.color = 'white';
        break;
    } else {
        logo.style.color = 'black';
    }
};

Обновленное содержимое:
1. Для этого решения мне нужно использовать оператор break в цикле , поэтому я использую for вместо foreach
2. Нам нужно break, если логотип на каждом изображении.

ПОЧЕМУ? :
Если logo находится внутри image1, то его «цвет» может быть white, но на следующем шаге его «цвет» может быть blackпотому что logo не находится внутри image2.

Ниже код более читабелен для этого решения:

const logo = document.querySelector('.logo');
const images = document.querySelectorAll('.image');

function isInsideInImages(images, logoPos) {
    for (var i = 0; i < images.length; i++) {
        let imagePos = images[i].getBoundingClientRect();

        if (logoPos.top <= (imagePos.top + imagePos.height) && (logoPos.top + logoPos.height) > imagePos.top) {
            return true;
        }
    };
    return false;
}

window.addEventListener('scroll', function () {

    const a = logo.getBoundingClientRect();

    if (isInsideInImages(images, a)) {
        logo.style.color = 'white';
    } else {
        logo.style.color = 'black';
    }

});