Transparent and sticky header with background on scroll


I’v watched the videos regarding the header but it seems to me that I have to choose between either a sticky or a transparent header.
I would like to build a header like this:

First it should be transparent and on scroll I want it to get a background and be sticky. Is this possible?

Hi Jonas,

You can use those classes to style your header according to its position (top of page, inside offset, etc.):


I think Cwicly showcased that with there template “blanc”, just insert that and lookup the settings


Thats awesome! Thanks a lot!

Hi @Jonas,

Yes, it is possible to have a sticky transparent header, that on scroll, takes on a background colour.

As @yankiara pointed out, you can achieve this with Relative Styling by targeting the scroll direction selectors.

I have recorded a short video that should help you achieve this.

Please let me know if this helps!


Hi @Araminta,

thank you very much for your detailed explanation! Based on the responses to my question as well as your video I achieved exactly what I needed.
So far I’m truly amazed by your support and Cwicly of cause!

1 Like