Need a help with a floating and auto hiding toolbar - Button Panel submenus are messed up in horizontal direction

[Jaris GV]

Hello folks.

I know that the Trumbowyg editor toolbar, in full mode, is fixed to the top of the screen when the user scrolls down in the editing area. But I would like to see it only when the user points the mouse arrow to the top of the screen.

Well, I almost did it, but it seems like there is a conflict between the positions of the button panel and its dropdown items, and when I keep the dropdown just below the button panel, even though the user has scrolled down two or more times the height from the viewport, the behavior of the submenus is completely confused in the horizontal direction.

I'm working in the example in this Pen:

(https://codepen.io/byJaris/pen/vYvmwNq)

So, is there a way to keep both Button Panel and its Dropdown menus in sticky position working properly?

Thank you in advance.

🙏🏽🙏🏽🙏🏽