Is it possible to change the background color of the site header when scrolling?

Hi! When I scroll through my site, the text in the header remains white but the background changes to black. Is there a solution for when someone starts scrolling, the text changes to black and there is no background color? The background color of my pages is white and when using the navigation while scrolling, you cannot see the text of the subpages. I have attached two screenshots for you to look over. Is there a way to change the text color only when scrolling?

Hello @IndusSociety

Yes, it is indeed possible to achieve this using custom CSS. I can provide you with the necessary code to assist you.

.shrink .header-nav * {
    color: #000000 !important;
}

.header img {
  filter: brightness(50%); /* Darker image when scrolled */
}

@LoftyDevs-Squarespace thank you! We are almost there. When I enter the code you can no longer see the main header menu as the font color is black. But you can see the sub-pages perfectly. I've attached a screenshot below for your review. What do you suggest as a fix? 

@LoftyDevs-Website-Designer @tuanphan @Ziggy Hello! Just reaching out to see if you can help resolve this issue? I would greatly appreciate it. Thanks!

Can you share site url?

Don't remove any code in your current code. Use this code to Custom CSS box.

header#header.shrink div.header-nav-folder-content {
    background-color: #000 !important;
}

@tuanphan YOU ARE THE BEST! Thank you.