How can I fade a portion of the header in as I scroll down the page?

Ask the community
, ,
1

How can I fade a portion of the header in as I scroll down the page?

I have messed with adding a second header without the added elements but transitioning from one header (without these added elements) to another with them seems impossible while keeping both headers pinned.

Is this possible to achieve and how might I do it without jumping into a bunch of code?

Thanks