Transparent Header until you scroll

Hi everyone - Hope you are enjoying your holidays 😃!

I'm looking to have a transparent header to show the full bleed image underneath w/ white header text/page title/cart buttons, etc. I've figured out how to use CSS to get that set up. What I'm also looking to do though, is have the header background color turn white w/ dark green text from my color palette once you scroll down and follow the user down the page, if that makes sense. Is that something that can be configured easily in Squarespace or would I need custom CSS code to set that up?

Example of how I'd like the header to function: https://maisonlaurea.com/

check out how the header transparency goes away once the user scrolls or mouses over the header.

TIA!!

Hi. Can you share link to your site? We can help easier