Here’s what I currently have working. It’s close, except for when you are in the ‘hero’ section or you’re scrolled to the top of the page, the background is now white, that’s what I can’t figure out: how to remove the white background when in the hero section or top of the page.
It’s basically doing this via Interactions:
Initial state has a transparent background
Hiding the nav when scrolling down
Showing the nav when scrolling up and adding a background color
I started by solution based on this tutorial and jeffjeanbap’s answer in this post:
But I actually ended up combing the two. So essentially I did the tutorial video, then added another interaction that was “while page is scrolling” that just controlled the background color. I also made the background color start at 4% down the page instead of 1% like jeffjeanbap suggested as the 1% was choppy looking to me.