header jumps out of the container when sticked

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

…

} } `

[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