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?

Thermostat

I have the exact same issue, could you solve it? – Liberati

@ mvidalgarcia No, I haven't gotten round to solving it yet. But I can tell you that Gibin Ealias's answer is the right way to go. He explains the issue correctly, we just need to find the solution to it – Thermostat

Answer 1

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

Cryptogam

Answer 2

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.

Inveteracy

Can you elaborate on where to add the margin-top attribute and what exactly needs to be done? – Portuna

@jackz314 - The margin-top need to be added dynamically through JS when the user scrolls down and should be removed when scrolled up to the top of the page. It shall be added either to the sibling element of the header or its child <div class="ui header">...</div> in this case. – Inveteracy

Answer 3

I kind of solved it for myself. Tried adding rail as in above solution but didn't work.

I realized the problem for me was the pre-render library I was using. Rather than getting rid of pre-render library, I added an active attribute to Sticky, with it being false by default (stored in state). Then, after 3-second delay, I turned it on (set active attribute in the state to active). I chose 3 seconds because I believe that's how long my pre-render took to compose each page (I'm not exactly informed on the details of how it does this).

Like:

componentDidMount() {
    ...
    //Enable sticky functionality after delay
    setTimeout(function() { //Start the timer
        this.setState({
          controls: {
            ...this.state.controls,
            isStickyActive: true,
          }
        }) //After 3 seconds, set isStickyActive to true
    }.bind(this), 3000);
    ...
}

Schaper