问题
有没有办法在类似于clip-mask使用 JavaScript 或 jQuery 的渐变上淡出内容？
问题
我有一个带有透明背景的固定标题，以及一个带有透明部分的“.png”徽标。我有半透明的元素，它们垂直向上滚动页面，因此在标题和徽标下方。
当事物在徽标下滚动时，它们会显示出来，一切看起来都很糟糕。
建议的解决方案
我们希望在某个点（标题的底部）之上淡出内容。我们使用ScrollMagic和GSAP来为元素滚动时设置动画，这会导致与clip-path其他 CSS 修复发生冲突，所以我最有可能寻找 JavaScript/jQuery 修复。
示例代码
应评论者的要求，我创建了一个 JSFiddle，其中包括几部分。
有两个要素需要考虑：#masthead和#content。下面有一个区域（在 中blue）#masthead，我想在其中#content渐变为从不透明度1到的渐变0。