Fixed header opacity change on scroll

Hey all! 

I have a fixed scroll header in place, with the solid style. 

I would like to basically change that solid opacity on scroll, so once we've scrolled on the page the header stays fixed but the opacity of it changes as to not disrupt the content in the background. 

Thanks in advance! 

Can you share your website URL?

sure https://fox-porcupine-3ldj.squarespace.com/

pass: ybn123

If you set the header to dynamic, and then use this Custom CSS:

#header {
  background-color: transparent;
}
.header-announcement-bar-wrapper {
  background-color: rgba(255,255,255,.66)!important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Hey, thank you for this! Unfortunately it doesn't give me the desired effect. 

It makes the whole header become a little translucent, even from the top, when I want it to be solid and then on scroll have like a 50% opacity. 

Also another issue i'm having is that when I change the colour code to the darkest colour on my site 

it just turns into a solid header and the code seems to stop working (so the blur doesn't work etc)

Amazing!! That worked! Thank you so much for your help 🙂

How would you target the header if it's the header bottom? Thanks! In 7.0