Sticky Header animation not working on Refresh Theme

Store Design
, ,

Topic summary

Sticky header “Only show on scroll” animation on the Refresh theme works in the theme editor but not on the live site. On the live site, the header remains visible while scrolling down (no hide/show animation), whereas the desired behavior is: hide on scroll down, show on scroll up.

Progress:

  • Helper asked for screenshots; the original poster shared two images illustrating expected vs. actual behavior. Images are central to understanding the discrepancy.
  • A suggested fix involved editing theme.liquid and inserting code before . The provided snippet content is not shown in the thread, and the change made the header transparent rather than restoring the scroll-triggered animation.

Clarifications:

  • The issue is not header transparency; the request is to reinstate the “Only show on scroll” animation on the live site.

Status:

  • No resolution yet. The animation still fails on the live storefront despite working in the editor.
  • Awaiting a targeted fix or further guidance (e.g., correct script/CSS for scroll-direction detection and ensuring it loads on the live site).
Summarized with AI on December 24. AI used: gpt-5.
5

In this one, the header is not shown because I have it selected as Only Show on Scroll, which is what I want.

Viibed_0-1721531279035.png
Viibed_0-1721531279035.png1376×918 216 KB

In this screenshot, it IS visible even though I am scrolling down(no animation at ALL is shown) Which is what I’m trying to fix.

Viibed_1-1721531410110.png
Viibed_1-1721531410110.png1833×925 218 KB

You can’t get a screenshot of an animation, so I hope I explained everything well and cleared up confusion.