Sticky Header Causing Jumping During Scroll

[jgille07]

I’m trying to create a header that has two bars where the top bar is NOT sticky but the bottom bar is sticky and I’ve been able to implement that, however the body content of the page jumps down when scrolling. The height of the jump during scrolling seems to be roughly the height of the sticky header bar.

I have separate header bars for mobile devices that show based on device breakpoints and I’m experiencing the same issues with those bars.

Link to website: https://bestbudseedbank.com

[ruenel]

Hello @jgille07

Thanks for writing in!

In your Bar element settings’ Sticky Option, add a Trigger Offset value to allow the Sticky Bar to only appear after the page is scrolled for a few pixels as indicated in the offset value.

Kindly let us know if this works out for you.