Switch Logo on Scroll

Can someone help me so that my logo switches from our light logo to our darker one on scroll? 

6 minutes ago, alexwhittlee said:

Can someone help me so that my logo switches from our light logo to our darker one on scroll? 

Can you share your website URL?

It's not public yet but I am happy to give you access if you can help! 

7 minutes ago, alexwhittlee said:

It's not public yet but I am happy to give you access if you can help! 

You can make the website password protected and share the website with the password. Instructions below

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

https://dandelion-cheetah-ffdb.squarespace.com/ 

pasword: 1236

This might be easier. How can I change the color of the text and the button in the header once the user starts to scroll?  

1 hour ago, alexwhittlee said:

https://dandelion-cheetah-ffdb.squarespace.com/ 

pasword: 1236

Can you upload the dark logo and send me the logo URL?

The dark logo is the one that is there now. This is the primary logo though so I think I'm thinking I should just switch the color of the text now. Is there a way for me to keep the text and button white before scrolling and then switch it to brown once I start to scroll and the header background turns to white? 

Just now, alexwhittlee said:

The dark logo is the one that is there now. This is the primary logo though so I think I'm thinking I should just switch the color of the text now. Is there a way for me to keep the text and button white before scrolling and then switch it to brown once I start to scroll and the header background turns to white? 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. Let me know if it work

.header-nav-folder-item * {
    color: #000;
}
.sqs-button-element--primary:hover {
    color: #000 !important;
}
.header-nav-folder-item:hover *, .header-nav-folder-item--active * {
    color: #be8a60;
}
.theme-col--primary.shrink {
    .header-nav-item a{
        color: #000 !important;
    }
    .header-nav-item:hover > a, .header-nav-item.header-nav-item--active a {
        color: #be8a60 !important;
    }
    .sqs-button-element--primary {
        border-color: #000 !important;
        color: #000 !important;
    }
    .sqs-button-element--primary:hover {
        background: #000 !important;
        color: #fff !important;
    }
}

Yes, that worked! Thank you very much. Is there any way to make that transition feel more fluid? 

Again, thank you. I really appreciate your help.