How to make sticky header when scrolling up?

Solved
Highlighted
Explorer
167 2 8

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

0 Likes
Highlighted

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/

CRO Expert at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages.
0 Likes
Highlighted
Explorer
167 2 8

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


0 Likes
Highlighted

This is an accepted solution.

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

CRO Expert at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages.
1 Like
Highlighted
Explorer
167 2 8

Hi,

Thanks, I've invited u!

0 Likes
Highlighted

Reload your store and check the result

CRO Expert at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages.
0 Likes
Highlighted
New Member
1 0 0

Hello Richard,

I have the exact same problem :( 

Can you please help?

 

Thank you!

0 Likes
Highlighted
Explorer
53 1 6

Hi @RichardNguyen,

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

0 Likes
Highlighted
New Member
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! 

0 Likes
Highlighted
Tourist
10 0 1

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

0 Likes