How to make sticky header when scrolling up?

Technical Q&A
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.