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

Question

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

我发现了一些基于背景图像设置颜色的内容，但导航并不总是浮动在图像上。有人对这个有经验么？我试图找到一些例子，但没有真正遇到过任何事情，所以也许现在就不可能了。

这里有一个关于我想要的基本概念的小提琴。 https://jsfiddle.net/y867dL46/

HTML

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

CSS

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

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