我正在尝试为网站上的徽标实现特定效果。我希望徽标在滚动时从下到上填充颜色。例如。滚动300px后，徽标的颜色从白色变为黑色。重要的是它与滚动事件相关联，而不是独立动画。为了澄清，我制作了一个动画GIF：Logo animation
要求：
我已经尝试了以下内容：
我创建了一个#logo div position: fixed;，一个白色背景和使用mask-image: url(logo.svg);的mask-image属性，它在白色背景上显示了徽标。使用黑色:before元素，我可以成功地用黑色覆盖图像。但是，由于#logo元素是固定的，我无法获取要滚动的伪元素。这就是我现在被困住的地方。有人知道如何解决这个问题吗？只要符合我的要求，任何解决方案都会受到赞赏。
谢谢！
