Need code to hide header logo on homepage until scroll

Site URL: https://algae-lute-kkft.squarespace.com/
Password: lucid

Hi, on my homepage I'm displaying my logo large over an image so I want to hide the logo from the website header, but after you scroll past the first image I want it to reappear in the header. I've tried the below code - but it only makes it disappear completely. Any help much appreciated! Thanks

.header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo img {
    visibility: visible;
}

Please share the site’s URL in your post. It isn't included in the post by default.

1 hour ago, JessicaWare said:

Site URL: https://algae-lute-kkft.squarespace.com/

Hi, on my homepage I'm displaying my logo large over an image so I want to hide the logo from the website header, but after you scroll past the first image I want it to reappear in the header. I've tried the below code - but it only makes it disappear completely. Any help much appreciated! Thanks

.header-title-logo img {
    visibility: hidden;
}
.shrink .header-title-logo img {
    visibility: visible;
}

Your website is private now. Make it password protected and share the password. 
https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

Sorry - url and password now added! 

46 minutes ago, JessicaWare said:

Sorry - url and password now added! 

Follow the image instruction and make the header Fixed position enable. 

@Web_Solutions amazing - thank you! Is there a way to make the header stay transparent when scrolling? When I scroll the header changes from transparent to have a white background so you can't see the navigation and logo when they are white.

Also is it possible to only make this happen on the homepage? So on all other pages the logo in the header displays straight away?

Thanks