Creating a sticky bar in Semantic UI (React). Page jumps when scrolling

While scrolling, position:fixed; is added to the parent of <div class="ui inverted menu">. This moves out the element from the dom structure thus removing the space which it occupied. Therefore, the sibling jumps up occupying the free space.

You may manually add margin-top to the sibling while the position is set as fixed, as a workaround.

I used a Rails component to wrap the Sticky component and applied padding/margin offset to the sibling. The rail makes the sticky act like overlay and not part of the parent div. Just need to add custom css to the rail to override the default behaviour. Context ref allows the sticky to be stuck through out the context of that element.

Made some changes to the code sandbox Sticky Menu Example