The question
Is there a way to fade contents out on a gradient similar to clip-mask using JavaScript or jQuery?
The problem
I've got a fixed header with a transparent background, and a '.png' logo with transparent pieces. I have semi-transparent elements which scroll vertically up the page, and thus below the header and logo.
When things scroll under the logo they show through and everything looks pretty bad.
The proposed solution
We'd like to fade out content above a certain point (the bottom of the header). We're using ScrollMagic with GSAP to animate elements as they scroll which causes conflicts with clip-path and other CSS fixes, so I am looking for a JavaScript/jQuery fix most likely.
Sample code
At the request of a commenter, I've created a JSFiddle which includes a few pieces.
There are two elements that should be considered: #masthead and #content. There's an area (in blue) below #masthead in which I would like #content to fade as a gradient from opacity 1 to 0.