While scrolling down the page the text scrolls up and shows behind the header bar. Text behind text looks confusing and messy. Can this be changed?

[anthonyfok]

(From #92) @CarolLWagner helpfully points out that:

While scrolling down the page the text scrolls up and shows behind the header bar. Text behind text looks confusing and messy. Can this be changed?

I wonder if some kind of CSS animation can be applied to the semi-transparent header bar so that it becomes opaque while scrolling down the page? This is one of the ways I've seen on other websites, though there are other workarounds too.