Change colour of nav bar on scroll

Site URL: https://octopus-sparrow-txkz.squarespace.com/

Hello. 

I want my nav bar to go from transparent to this colour: #a9ccb0 when it scrolls down the page. 

Can anyone help? thanks 

Link: https://octopus-sparrow-txkz.squarespace.com/
Password: hello123

About how much scroll down the page do you want the effect to take effect?

It could be as simple as if scroll is not zero change the background. Or some number of pixels of scroll before the effect turns on. You can get even fancier, possibly, and try to detect what is where on the page and change based on those relationships. For example past the first page section. But the latter is much more complex code and you'd probably need to hire a developer.