Header - Fixed then sticky - But have gap

Store Design
1

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

1 Like
2

@Lucky07

Please share the screenshot of what do you want!

Thanks!

3

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!