在滚动上制作相对div剪辑静态徽标 - CSS

Question

我希望在单页滚动网站上实现以下效果。

该网站分为不同的部分（当然使用<section>标记），左下角有一个固定的位置标识。

我希望能够根据下面的哪个部分来屏蔽/剪裁徽标颜色。对于初学者，我将相同的徽标两次放在一起，因此基本上有两个z-indexed徽标一个在另一个上面。

以下是一些快速模型供参考。

第1节：

第2节：

滚动时想要的效果：

提前致谢！

Answer 1

如上所述，这个问题的答案可以在这里找到：

How to create image scrolling blend effect with CSS?

我希望尝试稍微调整一下，尝试使用clip属性或使用height和overflow:hidden的方法。我现在找不到时间尝试，但如果我做的话，我会相应更新。