Header to disappear when scrolling down but not re-appear when scrolling up

Hey there,

My website is created using the Carson template. In this template the header disappears when you scroll down a page but re-appears as soon as you scroll even slightly back up.

Is there some CSS code I can use that would mean the header disappears when scrolling down but only reappears when you get back to the very top of the page?

Many thanks in advance!

Hi,

You mean this template? https://carson-demo.squarespace.com/

Hey tuanphan,

Hmm, no that doesn't look quite right. A member of squarespace help team mentioned that my website was the Carson demo, but perhaps that was incorrect.

Here's the website I'm talking about: http://www.mcgregorcasting.com/

Any help would be greatly appreciated!

Carson is a member of the Tremont template family.

Thanks, creedon. Any thoughts about getting the header to disappear when scrolling down but only reappear when you get back to the very top of the page?

Quote

Any thoughts about getting the header to disappear when scrolling down but only reappear when you get back to the very top of the page?

Thoughts but not a solution. The effect you are seeing is being handled by DOM Events (scroll) and JavaScript which then manipulate DOM elements and CSS.

So there is no simple CSS solution.

The header has at least two scripts being triggered by scroll events. One for the header hide/show and the other I have no idea.

An overall solution would involve disabling SS's header effect and creating some new JavaScript to do what you want. I don't see this being an easy one as there are interactions between SS's event code and manipulating the header element.