Sticky nav 'snaps' when it hits top. Not smooth

[jrhager84]

I’m just wondering if there’s a setting somewhere I’m missing that ensures that the transition to sticky is smoother. If you look at my staging site https://joelhager.com/sites/love/ you’ll see that when you scroll down, there’s a little ‘jank’ in the animation where it snaps to the top. I hate that, and would like to fix it. Any ideas? Thanks in advance!

[Prasant]

Hello @jrhager84,

Thanks for asking.

I checked the website on my end and I don’t see any lag in animation in navigation bar. Please see the screencast. https://cloudup.com/cgkxGtIHNmW

Please make sure you are using latest version of the browser and clear cache and then see how it goes.

Thanks.

[jrhager84]

So I found the issue, but can’t find a solution without explicitly setting a container height. If I set it to ‘auto’ It will snap, and in some cases even resize the container. Is there any way to avoid that?

[rad]

Hi @jrhager84,

Where do you set the auto? As what I found, the height of the first header bar is equivalent to single scroll action of the mouse, hence, it sticks in instant. Try increasing its height that what it has now.

Then make sure the trigger offset of your second header bar should equal to the height of your first header bar.

Thanks!

[jrhager84]

I set the auto on the height of the parent container, so it’s only as big as it needs to be instead of the default 6em.

[rad]

Hi @jrhager84,

Would you mind setting it back to when it still scrolling smoothly? I changed the height from auto to fixed and the scrolling behavior is still the same. I’m not sure what was the previous behavior.

And please provide your admin login credentials in a secure note in case we need further checking.

Thanks!