Debut Header Sticky but Disappear on Scroll

Solved
Someoutofnone
Tourist
6 0 0

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. 

0 Likes

Hello @Someoutofnone ,
Welcome to the Shopify community!
Share your store url with password.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Someoutofnone
Tourist
6 0 0

Thank you! it's working!

0 Likes
Someoutofnone
Tourist
6 0 0

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

0 Likes