Re: How to make sticky header when scrolling up?

Solved

How to make sticky header when scrolling up?

NielsSchutte
Explorer
168 2 12

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

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4731 1078 1743

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 10 (10)

PageFly-Richard
Shopify Partner
4731 1078 1743

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/

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

NielsSchutte
Explorer
168 2 12

I do not have a clue how to implement this in Shopify's code...?


PageFly-Richard
Shopify Partner
4731 1078 1743

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

NielsSchutte
Explorer
168 2 12

Hi,

Thanks, I've invited u!

PageFly-Richard
Shopify Partner
4731 1078 1743

Reload your store and check the result

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

nabil4
Visitor
1 0 0

Hello Richard,

I have the exact same problem 😞 

Can you please help?

 

Thank you!

artjom_mrtnk
Visitor
1 0 0

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! 

AdamAnas
Shopify Partner
35 1 7

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

CharlesB23
Visitor
1 0 0

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

YoungAdult
Explorer
54 1 9

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