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 1001 1124

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
15741 2354 3057

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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

LitExtension
Shopify Partner
4860 1001 1124

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