我有一个简单的布局jquery css() 设置背景位置，由三个全高 div 和一个固定的标题栏组成。

  <pre class="snippet-code-css lang-css prettyprint-override">`body,html {
padding:0;
margin:0;
}
.header {
position:fixed;
width:100%;
height:50px;
color:white;
margin:20px;
}
.section1 {
background:black;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
color:white;
}
.section2 {
background:white;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
.section3 {
background:black;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
color:white;
}`</pre>

  <pre class="snippet-code-html lang-html prettyprint-override">`
Header Content

Section One Content

Section Two Content

Section Three Content

  我试图在标题栏文本滚动到具有白色背景的部分时将其颜色更改为黑色。

  我见过几个 jQuery 插件应该可以实现这一点jquery css() 设置背景位置，但我正在努力避免任何不必要的脚本。

  CSS mix-blend-mode 函数能让我实现这个吗？有没有人可以举出一个例子来告诉我实现了类似的目标？