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

Question

I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position

Sandbox https://codesandbox.io/s/y7k3zn5qn1

I haven't provided the context prop to the sticky component. In the examples they have always provided the React DOM reference of the enclosing div as the context prop to the Sticky component. The documentation is not clear as to the purpose of the context prop. (It says "Context which sticky element should stick to")

Do I need to provide a context prop to the sticky component to stop the "jump" scrolling? If so, how do I decide which enclosing div ref to provide as the context prop?

Answer 1

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.

Answer 2

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