Javascript 在用户滚动时，根据背景动态更改文本颜色

我使用的是浮动的、固定的跳过链接导航，覆盖在页面的右侧，没有背景。基本上只是浮动的气泡和文本。当用户滚动时，我想根据背景是亮还是暗来更改导航文本的颜色

我发现了一些基于背景图像设置颜色的方法，但是导航并不总是漂浮在图像上。有没有人有这方面的经验？我试着找一些例子，但没有真正遇到任何问题，所以可能现在还不可能

这是我想要什么的基本想法。

HTML

---

因此，我希望导航栏的颜色在滚动到黑色部分时变为白色，然后在滚动到白色部分时变回黑色。

创建一个小提琴，以便我们可以看到您想要做什么。或者至少包括一些代码好吧，我添加了一把小提琴和代码。可能，但非常消耗！这将是以下步骤：（1）查找当前滚动位置。（2） 找出哪个部分在滚动位置。（3）检查该部分的背景色。（4） 确定导航栏应该是黑色还是白色，并相应地更改其颜色。。。步骤1、3、4相对容易，但步骤2非常耗时！通常你会检查一个元素它的滚动位置是什么。但是，由于您需要找到滚动位置上的分区，因此您必须比较页面上每个分区的滚动位置，以及滚动的每个像素！

<div class="navbar">
    <ul>
        <li class="bubble">
            <div class="label">Link1</div>
        </li>
        <li class="bubble">
            <div class="label">Link2</div>
        </li>
        <li class="bubble">
            <div class="label">Link3</div>
        </li>
    </ul>
</div>

<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>

.section1, .section3 {
    height: 400px;
    width: 100%;
    background-color: white;
}

.section2 {
    height: 400px;
    width: 100%;
    background-color: black;
}

.navbar {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.navbar ul {
    list-style: none;
}

.bubble {
    margin-bottom: 10px;
    position: relative;
    width: 20px;
    height: 20px;
    background: black;
    border-radius: 1000px;
}

.label {
    position: absolute;
    right: 30px;
}