How to fully customizable the transparent & fixed header

Hi!

For a website I'm working on, I'm trying to create a transparent, fixed header that will change it's font & logo color on scroll.

For example; on the homepage you'll see a transparent header with an off-white logo & navigation and I want to let it change to a white background with a black logo & navigation when scrolling. (I'm not looking for changing the color settings of the block below).

Is there anyone who has some code to do it?

URL: https://notyourtherapist.squarespace.com/
password: anuroopa

Thank you!

You can use this code to Website > Website Tools > Custom CSS

/* HOMEPAGE - Header scroll */
body.homepage {
/* header color */
header#header.shrink {
    background-color: white !important;
}
header#header.shrink img {
    filter: invert(0);
}
/* navigation items */
header#header.shrink div.header-nav-item>a {
    color: #000 !important;
}
/* Burger Icon */
header#header.shrink .burger-inner>div {
    background-color: #000 !important;
}
}
/* Burger X Close icon */
body.homepage.header--menu-open header#header.shrink .burger-inner>div {
    background-color: #000 !important;
}

@tuanphan thank you so much! This worked! 

Last question; what if I want to add this to a specific page? What do I use instead of body.homepage?