Changing all Navigation Items Color on Scroll

Hello all, 

I'm trying to change all navigation items (nav links, logo, social icons, button, border, etc.) text color on scroll ideally at 2s-4s or 25% down the page ONLY on the homepage.

Any CSS help is greatly appreciated!

Link: https://mandarin-parsnip-nj7c.squarespace.com/config/

Password: OreoCookie

@tuanphan works great but it didn't keep the bottom border on scroll, should I just add "border: 1px;" somewhere?

On 1/30/2023 at 8:08 AM, SKPhotography said:

@tuanphan works great but it didn't keep the bottom border on scroll, should I just add "border: 1px;" somewhere?

Add this code under

header#header.shrink {
    border-bottom: 2px solid red;
}