在不同的背景元素上创建具有不同背景颜色的固定元素？

Question

我目前正在尝试创建一个浮动的，固定的元素，该元素的颜色将根据上方当前浮动的元素而不同（请参见下图）。当我滚动时，背景以及因此元素应缓慢变化。

我最初的想法是使用z-index并使用两个不同的浮动元素来创建此效果，但这似乎是不可能的（请参见下面的摘录）

body, html {
  margin: 0;
}

/* BACKGROUNDS */
.background {
  height: 90vh;
  width: 100vw;
}
.background-light {
  background-color: #EBEBEB;
  
  z-index: 1;
}
.background-dark {
  background-color: #212121;
  z-index: 3;
}

/* OVERLAY  */
.overlay {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  padding: 1.5rem;
  border-radius: 1rem;
}
.over-light {
  background-color: #212121;
  z-index: 2;
}
.over-dark {
  background-color: #EBEBEB;
  z-index: 4;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: #6ef250;
  border-radius: 100%;
}

<div>
  <div class="background background-light">
  </div>
  <div class="background background-dark">
  </div>
</div>
<div>
  <div class="overlay over-light">
    <div class="circle"></div>
  </div>
  <div class="overlay over-dark">
    <div class="circle"></div>
  </div>
</div>

一个人怎么能达到这种效果呢？