Liquid, JavaScript, themes, sales channels
I was able to find the code to make my website's header sticky but I was wondering if there's a code to make the header sticky when scrolling up but hide the header whenever the user scrolls down? Using debut theme btw.
Solved! Go to the solution
This is an accepted solution.
Hi @Someoutofnone,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Sections > header.liquid and find 'data-section-id'. Change 'div' => 'sticky-header'. https://i.imgur.com/wbOWXdx.png
- Step 3: Add code in bottom. https://i.imgur.com/P0GRzAF.png
Code: https://pastebin.com/ZTWcmVMw
Hope it is clear to you.
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.
Hello @Someoutofnone ,
Welcome to the Shopify community!
Share your store url with password.
This is an accepted solution.
Hi @Someoutofnone,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Sections > header.liquid and find 'data-section-id'. Change 'div' => 'sticky-header'. https://i.imgur.com/wbOWXdx.png
- Step 3: Add code in bottom. https://i.imgur.com/P0GRzAF.png
Code: https://pastebin.com/ZTWcmVMw
Hope it is clear to you.
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.
Thank you! it's working!
Hi there is actually a hiccup problem, when I first scroll down from the headers initial position, the header disappears very choppily with no fade out animation, but when I scroll up/down anywhere else on the page the show/hide function works fine. Is there any way to fix it in the code? Thank you
I cannot find the data-section-id
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024