Create a transparent header that appears when user scrolls?

Hello there,

I'm looking to create a header that's invisible until the user scrolls.

Perhaps it could also fade or slide in as it appears.

Any help would be most appreciated.

Thanks!

@SanHolo Hi! Can you share your site URL for context? 

I Lesum,

Here it is: https://www.animateus.co.uk/

Thank you

@SanHolo First enable the ‘Fixed Position’ option for your header in the Squarespace editor by navigating to Edit > Edit Site Header > Edit Design > Fixed Position, and toggle it on. See the screenshot for reference.

After that, you can add this code under Website > Pages > Website Tools > Custom CSS. Code hides the header initially, making it visible once you start scrolling.

.header {
  opacity: 0;
 transition: opacity 1.3s ease-in-out;
}

.header.shrink {
  opacity: 1;
}

Worked like a charm! Thank you so much.

I'm wondering, is there a way to make it fade in so that its appearance isn't so abrupt?

I notice that there's a transition line in the code you provided but that part didn't work for whatever reason.