问题

有没有办法使用JavaScript或jQuery在类似于clip-mask的渐变上淡出内容？

我有一个透明背景的固定标题，以及一个＆＃39; .png＆＃39;徽标与透明件。我有半透明的元素，它们垂直向上滚动页面，因此在标题和徽标下面。

当事物在徽标下滚动时，它们显示出来并且一切看起来都很糟糕。

建议的解决方案

我们希望将内容淡出特定点（标题的底部）。我们正在使用ScrollMagic和GSAP来动画元素，因为它们会滚动，导致与clip-path和其他CSS修复冲突，因此我很有可能寻找JavaScript / jQuery修复。

enter image description here

应评论者的要求，我创建了一个包含几个部分的JSFiddle。

应考虑两个要素：#masthead和#content。 blue下面的某个区域（#masthead）中我希望#content淡化为从不透明度1到0的渐变。