Debut Header Sticky but Disappear on Scroll

[Someoutofnone]

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. 

[oscprofessional]

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

[LitExtension · 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.

[Someoutofnone]

Thank you! it's working!

[Someoutofnone]

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]

I cannot find the data-section-id