Question

当我在深色图像（.image）顶部滚动时，我试图更改固定元素（.logo）的颜色。我遇到了这个解决方案：

Detect when static element overlaps fixed element position on scroll

仅适用于单个图像。但是，如果我想在滚动时通过使用querySelectorAll更改具有图像类的所有图像，该如何更改固定元素的颜色呢？

我尝试使用forEach解决此问题，但固定元素仅更改了最后一张图像的颜色。有人可以解释这种行为吗，在我看来这应该行得通吗？

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

ClientFunction

更新的内容：
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'; } }; statement in loop，所以我使用的是break而不是for
2.如果徽标位于每个图像中，则需要foreach。

为什么？：
如果break在logo内部，则其颜色可以为image1，但是下一步，其颜色可以为white，因为black不在内部logo。

以下代码对于此解决方案更易读：

image2

检测多个静态元素何时与滚动上的固定元素位置重叠

1 个答案: