Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic


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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.