Debut Header Sticky but Disappear on Scroll

Solved

Debut Header Sticky but Disappear on Scroll

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. 

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1002 1150

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 5 (5)

oscprofessional
Shopify Partner
15938 2383 3092

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

LitExtension
Shopify Partner
4860 1002 1150

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Someoutofnone
Tourist
6 0 0

Thank you! it's working!

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

CANDmedia
Visitor
1 0 0

I cannot find the data-section-id