How to make sticky header when scrolling up?

Technical Q&A

Topic summary

Goal: implement a header that hides when scrolling down and reappears (ideally with a slide-in animation) when scrolling up on a Shopify store (Supply theme).

Proposed approach: use a JavaScript + CSS pattern (external demo link provided) to detect scroll direction and toggle header visibility.

Implementation for OP: the helper requested staff access to the store and then indicated the change was applied (“Reload your store and check the result”). No public confirmation or code details were posted.

Follow-up requests: multiple users asked for the same behavior on other Shopify themes (Brooklyn, Empire) and sought guidance on where to place the code (e.g., whether to paste into theme.js). No step-by-step instructions or theme-specific guidance were shared in the thread.

Key technical notes:

  • “Sticky header” = header remains accessible and reappears on upward scroll.
  • Likely requires adding JS to handle scroll events and CSS for transition/animation.

Status: partially resolved for the original requester via direct assistance; unresolved/awaiting public implementation steps for others.

Summarized with AI on January 17. AI used: gpt-5.
1

Hi,

I’m trying to create a sticky header when scrolling up the page, currently I dont have a sticky header. Also a nice animation(slide in) would be nice, look example site:

www.bodyandfit.com

I’m using Supply theme and my website url is: www.smartnutrition.nl or smartsnutrition.myshopify.com which can be entered with password: plazay

I hope someone can help me out

NIels

2

You can use JavaScript code and CSS code in this demo to make the header sticky when scroll up http://jsfiddle.net/mariusc23/s6mLJ/31/

3

I do not have a clue how to implement this in Shopify’s code…?

4

Add me to your staff account, I will help you. My email is richard@pagefly.io

1 Like
5

Hi,

Thanks, I’ve invited u!

6

Reload your store and check the result

7

Hello Richard,

I have the exact same problem :frowning:

Can you please help?

Thank you!

8

Hi @PageFly-Richard ,

I would like to get the idea of how to put the sticky header while scrolling up but I have limited knowledge in programming especially in JavaScript. I am using Brooklyn Theme and I want to make a sticky header while scrolling up. I hope you can help me with this issue. I’ve already customized the website but I am not a pro programmer just new in the industry and still want learn more from other people.

Thank you so much!

Best Regards,

Young Adult

9

Hello!

I have the same issue. Would love to make the header disapper when scrolling down but to appear when scrolling up. Have found your code.

Do I paste that at the bottom of the theme.js or in some other file as well?

Thank you in advance!

10

How to make sticky header when scrolling up?- on Empire theme

11

Hi Page fly. Will help me with this? It would make my day.