.x-bar-fixed only removes after interaction (v2)

[lukefinsaas]

Hi folks,

We’ve got a funky little issue (detailed here before — apologies on not replying on that ticket, got distracted on other stuff).

TL;DR — the .x-bar-fixed class doesn’t drop off the Bar when you scroll back to the top of the site. Once you hover over the bar, though, the class drops off and we get the ‘position: relative;’ back. The effect is not ideal and a little jarring.

Any tips on how we can get that listener to listen a little bit better? or perhaps a better way to build these stacked headers? https://jaxondev.telainc.com/

Per the reply to the previous ticket, I’ve set all the header bars to ‘position: relative;’ but this doesn’t seem to help.

Perhaps I should write a little JS to watch the scroll and strip the .x-bar-fixed class when it’s 1em from the top?

I will attach credentials to the topic so you can take a look as well.

[tristup]

Hi @lukefinsaas,

Thanks for reaching out.
I have read both of your threads but didn’t recognize the exact problem you are having. If you can please provide any video that will help us more to recognize the problem and what you exactly want to achieve.

Thanks

[lukefinsaas]

Hey @tristup,

Sure thing. Trying out this Loom app — let me know if you can access this video:

[tristup]

Hi @lukefinsaas,

Thanks for the video. What I understand from it is that while scrolling back to the top the Alert bar is not coming back to its position and it required some interaction in the bar below it. If that is the case, the z-index of the Alert bar is the reason behind it. I went ahead and clear the cache from WP Rocket and now the bar is coming back while going back to the top.

Thanks

[lukefinsaas]

Thanks Trishup.

The issue was more that the header slides over the alert bar before snapping back to position on interaction (visibility of the alert bar is a concern — but more the issue with the snapping).

That said, I was able to get it to work better by removing the trigger offset and adding a shrink value of 1. That seems to get the bar to respond to the scroll a little faster + resolving the issue.

Thanks for the help!

[tristup]

Hi @lukefinsaas,

Glad that you are able to find the solution.

Thanks