Sticky bar using Relative position causes Flickering / Snapping

[thisisbbc]

Hello there,

I’m not sure how to fix this with CSS.

I’ve been following this thread for a solution without luck: https://theme.co/apex/forum/t/strange-snapping-issue-with-sticky-menu-bar/69148/7

We do not use “Shrink Amount: 0” and we do not use a “Bar Height: Auto” so I don’t know what’s causing the problem. Increasing the Trigger offset doesn’t change anything.

When we reach the top of the page, there’s always a small flickering where the content will be pushed after the navbar is restored on top.

Waiting for your feedback!

[christian]

Hey @thisisbbc,

For your case, you will need to set the Trigger Offset to 0. That will eliminate the “flicker” effect but just note that there still will be a height animation. That’s unavoidable and needed because of the shrinking back and forth of the bar.

Hope that helps.

[thisisbbc]

Hey @christian,

Thanks for the reply, I’m not entirely sure what I did differently this time, pretty sure I had tested a Trigger Offset of 0.

Anyway the good news is that it’s exactly what I wanted to achieve. The height animation is like you said unavoidable if we use shrinking, but at least now the content is not pushed.

I’m a bit puzzled though and I’m not entirely sure why adding a Trigger Offset creates content flickering.

The x-bar-space-top changes from display:none to display:block when the fixed-bar is triggered.

Why would the content flickers if this happen after some scrolling versus right-away after scrolling?

A bit curious here hehe.

Thank you!

[christian]

Hey @thisisbbc,

You’re welcome. The reason behind the flicker effect is because of the abrupt adding and removing of the Bar Spacer coupled with the height difference of the shrinking bar.

Hope that helps.

[thisisbbc]

Hey @christian,

Thanks as well for the explanation. This is handled via JS right?

Not sure if what I’m about to say makes sense but…

If we leave the bar-top fixed all the time and use the x-bar-space with a display:block; all the time instead of switching from display:none;, wouldn’t that fix this behavior?

I think even a better approach is maybe to have the bar-top absolutely positioned until scroll is triggered so that we can effectively make use of the trigger offset. This would make the bar-top-space the relatively positioned element, not the bar itself. When the trigger fires, the position changes to Fixed and the top value is increased gradually to make the menu appear from top (0.2s transition seems to be the sweet spot according to some UX devs).

There is a really neat implementation of this feature on a Codepen here (no trigger offset though): https://codepen.io/jordanbrauer/full/RRqEJW/

Although the HTML markup is not the same, maybe we can use some ideas here to improve how Pro handles the sticky navigation menu? I think what makes this feature more complex is to properly handle the trigger offset but something tells me there’s a way to make this work without flickering.

For me, in its current state, the shrinking feature combined with an offset trigger can only be used with a transparent navigation that has a Position:Absolute; set. If you use shrinking+offset with a top bar that has a Position:Relative;, it causes an annoying flickering. Not a big deal, but maybe something to investigate.

Hope this can be considered!

[christian]

Hey @thisisbbc,

To your question.

@thisisbbc

This is handled via JS right?

Yes, it’s handled by JS.

@thisisbbc

If we leave the bar-top fixed all the time and use the x-bar-space with a display:block; all the time instead of switching from display:none;, wouldn’t that fix this behavior?

No. This would break the layout without you overriding several styles and in the end, the result would be the same as you set the Bar to Position Absolute.

@thisisbbc

I think even a better approach is maybe to have the bar-top absolutely positioned until scroll is triggered so that we can effectively make use of the trigger offset.

Yes, the “flicker” does not exist in an absolute positioned bar because the bar’s height is no longer taken into account. The spacer also does not exist if the Bar is absolutely positioned. I’m referring to the Initial Position, just to clarify.

@thisisbbc

There is a really neat implementation of this feature on a Codepen

We’re always open for improvements so I’ll pass that and your overall feedback to our development team. I could not comment on that as that would require a lot of testing seeing if the technique is applicable to features or options of Pro.

Hope that helps.

[thisisbbc]

Appreciate the consideration, we’ll work around this for now

All best,
B

[ruenel]

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.