Change header from invisible to solid background when scrolling over text only

My website has a header with a clear background. when I scroll down the page the header logo and hamburger menu are showing over the text on my webpage. 

Is there a way of having the header background change from "clear" to "white" when it scrolls over text only?

Thanks

Hi, 

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

header#header.shrink {
	background-color: white !important;
}

Hey,

Thank you for your response. That seems to work but as soon as I start to scroll, the header then switches to a white background. Is it possible to only switch to a white background header when it passes over a text block? (just so you cant see text passing through text) I otherwise like that the transparent header shows through images, just not text.

Thanks.

I don't know this, it will require a lot of code..