Header change to block colour when scrolling (7.1)

Site URL: https://chicken-mango-5dmp.squarespace.com/config/

Hi wonderful tech gurus, 

For the header of my site I have already now coded that the header is transparent, and scrolls down the page with you as you move down. 

What I am trying to do now is turn the header back to having either a white or black background that comes into effect as soon as you start to scroll down the page. Staying transparent at top, changing to coloured background when moving basically.  And to do this across all pages.

Thank you in advance wonderful people 

A