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?
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