Hide header colour block upon scroll on blog only

Site URL: https://elizahopekenyon.squarespace.com/blog/song-blessings-chant

Hi Guys, 

I used this code to force my blog header to be coloured so that my white logo would show up. However ... now I have a different issue ...

<style>
#header {background-color: #173C50 !important;}
#header a {color: #fff !important;}
</style>
<style>.icon--fill svg{fill:#fff!important}</style>

When I scroll down the page the coloured header block stays at the top (without navigation links / social media icons). This looks weird! Help! 

My ideal scenario is to a) Have the header colour block disappear completely upon scroll (note: on blog only not site wide) ... 

OR

b) If the colour block needs to stay there, at least have the white logo, navigation, social media icons appear in white.

Password for the page is: turbo123

Please help! Thanks so much in advance!