CSS Transparent background when top of screen

[kiwis]

I have a header bar, when my page loads of the page is scrolled to the top I want the background to be transparent so you can see the background hero image cleanly.

As the user scrolls down I want the header bar to apply my background color.

Is there a way you can do this in CSS or does it need JS ?

Either way any help on how I could do this.

 

[Malcolm]

Hey there,

So I did a bit of research into this and found a pretty good resource that incorporates HTML, CSS and JS. It allows you to have different styling based on the scroll position.

I haven't played around with this yet, but have a look the CSS-Tricks guide here.