Change Header & Navigation Links colour on Scroll

Site URL: https://owl-bluebird-et6t.squarespace.com/

So my site header has a transparent background with white navigation links

I want it to do 3 (related) things

1. Change the background to white and the nav links to black on hover 
2. Completely disappear except of the navigation links & background on scroll (which I kind of achieved by reducing the logo height on scroll but it doesn't look quite right)
3. Become white with black links on on scroll as well

Here's a website that does this so you get the idea

https://www.belmond.com

thanks in advanced

site password is 1232

#1. Use this CSS

header#header:hover {
    background-color: white !important;
}
header#header:hover img {
    filter: invert(1);
}
header#header:hover .header-nav-item a {
    color: black !important;
}

#2. #3. You solved it?