FROM CACHE - en_header

Header - Fixed then sticky - But have gap

37 4 10

Hello Community,



Hello everyone, I have a header that is fixed.  Once the user scrolls down the header transition to a sticky more "narrow" header.   The transition from fixed to sticky looks great and works as designed.   


However, The transition doesn't take place until the user takes 2-scroll clicks,  with the mouse wheel.   I also utilize an announcement bar.  The Announcement bar moves up and out after one scroll click.  I am looking for a way to make this all more smooth.  Perhaps the transition starts sooner, or the fixed header moves up after 1 scroll click to fill the space left by the Announcement bar, then the transition to the sticky header starts at 2 scroll clicks.   Looking for ideas on this one


Theme = Capita; by Eight


PW = liegla



Clayton Healy
Replies 2 (2)
Shopify Partner
11014 2378 3402


Please share the screenshot of what do you want!


If helpful then please Like and Accept Solution | Email: | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
2464 580 569

Hi @Lucky07,

I checked and with current sticky JS code this is not possible. It will still be jerky when the sticky header is active.

So I recommend you to use the module for it, you can refer to it:

It will help sticky better.

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!