header jumps out of the container when sticked

[suziesirena]

Hi,

As shown below, the header jumps outside the main div when it's sticked :

Here is the code, any idea why this happens?

`
export default class Colonne extends React.Component {
render() {

...

      var rows = rowTags.map((indicator, index) => (
            <div key={index} style={{ width: 500, overflowY:'hidden'}}>
              <Sticky relative  topOffset={80}>
                {
                  ({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight }) => {
                    return (
                      <div style={{ ...style, overflow: 'auto', background: '#aaa'}}>
                        <h2>
                          <span className="pull-left"><center>{indicator.label}</center></span>
                        </h2>
                      </div>
                    )
                  }
                }
              </Sticky>

              <Paper className='box' zDepth={1}>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ullamcorper neque in consequat. Sed vehicula dolor in ante rutrum volutpat.</p>
              </Paper>
              <Paper className='box' zDepth={1}>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ullamcorper neque in consequat. Sed vehicula dolor in ante rutrum volutpat.</p>
              </Paper>
              <Paper className='box' zDepth={1}>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ullamcorper neque in consequat. Sed vehicula dolor in ante rutrum volutpat.</p>
              </Paper>
            </div>
      ))

  return(
    <div style={{ width: 500, overflowY:'hidden'}}>
      <StickyContainer style={{ height: 500, overflowY: 'auto', background: '#ddd'}}>
      {rows}
      </StickyContainer>
    </div>
  )

....

}
}
`

[MichaelDeBoey]

@suziesirena Try using the newly released v6.0.0, where you can set the relative prop to true. This should resolve your problem 🙂

[suziesirena]

Thx Michael for quick reply,

I already use v6.0.0 and use "relative" in the < Sticky> tag.
That's why I don't understand the glitch.

Any idea?

[suziesirena]

I realize that I have an horizontal problem too...
see this video : https://youtu.be/X4XeigeR68M
you can see that the sticky header stays over when you scroll right.

(Note : I've patched the vertical pb directly in the react-stick code : quick & dirty :/)

is it a nogo to use this component in my app ?

[kolhead]

Any solution to this issue . I have a similar issue with relative

[vcarl]

I'm not able to reproduce this with relative={true} on the Sticky element, could somebody provide a complete reproduction? Ideally a git repo I can git clone, npm install, npm start, but a code snippet I can copy-paste would be helpful too. @dgladkov maybe? I don't want to merge your PR (#210) without reproducing the problem myself.

[yourmediafriend]

I think this may be to do with the container being in an element with css transform / translate applied. This changes the origin of the position: fixed coordinates to that element rather than the viewport. I am having a similar problem.
Wrapping element css {transform: translate3d(54px, 0px, 0px); }
placeholderClientRect => DomRect{bottom:54, height:54, left:54, right:1920, top:0, width:1866, x:54, y:0}
StickyHeader jumps 54px right