如何使用javascript获得混合模式滚动效果？

我正在寻找一种基于背景改变某个元素背景颜色的方法。你可以用混合模式在css中做什么，但我希望能够设置颜色

更可取的是，我可以对SVG使用相同的技巧

要展示我在这里得到的是一个带有混合模式的JSFIDLE：

.block{
位置：固定；
顶部：10px；
左：10px；
高度：25px；
宽度：25px；
背景色：#fff；
混合模式：差异化；
}
.是绿色的{
显示：块；
高度：300px；
宽度：100%；
背景颜色：绿色；
}
.是白色的{
显示：块；
高度：300px；
宽度：100%；
背景色：#fff；
}

---

这里有一个技巧，考虑到

背景附件：fixed

.block{
位置：固定；
顶部：10px；
左：10px；
高度：25px；
宽度：25px；
边框：1px实心；
框大小：边框框；
}
.是绿色的{
显示：块；
高度：300px；
宽度：100%；
背景：
线性梯度（#fff，#fff）10px 10px/25px 25px固定无重复，
绿色
}
.是白色的{
显示：块；
高度：300px；
宽度：100%；
背景：
线性梯度（#000，#000）10px 10px/25px 25px固定无重复，
#fff；
}
身体{
垫底：200px；
}