Header - Fixed then sticky - But have gap

Lucky07
Excursionist
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

URL = Luckyindesign.com

PW = liegla

 

 

Clayton Healy
Replies 2 (2)

dmwwebartisan
Shopify Partner
12280 2546 3693

@Lucky07 

Please share the screenshot of what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

LitCommerce
Astronaut
2860 684 732

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: https://github.com/somewebmedia/hc-sticky

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!