Transparent header bar over image that turns into white background on scrolling

Hey All, I am trying to mimic the behavior of the header/nav-bar of this website (https://babaa.es/) on my squarespace website. 

More precisely, I am trying to get a header that:

• On load it is transparent and the block/image that I have put after the header  is "under it" (see https://babaa.es/ or screenshot "desired effect on load")
• On scrolling, the header gets a white background (see https://babaa.es/ when scrolling down or "desired effect after scroll")

I am having some difficulties using custom css to achieve this so I was wondering if anyone could help me

Hi,

What is your site url?

https://www.eilishstudio.com/home-1-1 is the page I am working on. I was able to do it on https://www.eilishstudio.com but that's not a GIF anymore it's just an image.

On 5/21/2023 at 6:50 AM, JCD said:

https://www.eilishstudio.com/home-1-1 is the page I am working on. I was able to do it on https://www.eilishstudio.com but that's not a GIF anymore it's just an image.

 

 

Add to Design > Custom CSS

body#collection-64691bf4c89f646e2c400c91 article section:first-child {
    padding-top: 0 !important;
}