Transparent sticky Header but when hovered over or scrolled down, turns into a solid colour

Store Design
, ,
1

I would like to achieve something like this. Whereby the header is transparent but when scrolled down or hovered over, the header will change to a solid colour.

A good example would be this website https://hushcandle.com/

Appreciate it if anyone could send me the code to paste in my shopify theme. I am using the dawn theme for your information.

2

Not certain this will work, but you can try the following:
Themes > Edit Code > theme.liquid

Then add the following code above the end /body tag, and click Save:

{% if template == 'index' %}
 

 
{% endif %}

Hope that helps solve your problem!
@biznazz101

3

The header doesn’t become a solid colour when scrolling down. I want it to be only transparent when the header is at the top of the page. Any solutions for this?