Header customisation

Site URL: https://lavender-greyhound-hr46.squarespace.com

I'm working on a client who really wants a homepage header like the one on https://www.thegreatfroglondon.com home page.

So essentially, when the customer scrolls down the header goes from being transparent with one logo to black with another logo. I'm not entirely sure if this is even possible and I can't for the life of me figure out how to do it so I was wondering if anybody could help.

The website I'm working on is: https://lavender-greyhound-hr46.squarespace.com/

pw: ddh22

I'm not particularly attached to the idea of a different logo and would settle for custom coding for the header to change from transparent to black when scrolling . 

Hi,

I see the header is black on scroll now. Did you solve problem??

15 hours ago, tuanphan said:

Hi,

I see the header is black on scroll now. Did you solve problem??

Hi, unfortunately not no. At the moment the header just scrolls back and then goes black when you scroll back up but I actually wanted it to transition into the black when you scroll down rather than having to scroll back up for it. 

I'm not sure if that's making any sense.

I also wondered it would be possible for the logo to change after the viewer scrolls down the page, like in the images above and like in the video below.

Try adding to Design > Custom CSS

header#header {
    position: fixed !important;
    top: 0 !important;
    transform: unset !important;
}