captivationsoftware/react-sticky

Sticky Header goes to right while transition

Opened this issue · 9 comments

smshahrukh commented

I am trying to animate slide down the wrapper in which react-sticky header is used.
The code is here:

<div class="wrapper is-slide-down">
  <Sticky style={{ zIndex: 12 }}>
    <div className="row sticky-header">
      <input onChange={onChangeTitle} autoFocus value={title} />
      <CancelIcon />
    </div>
  </Sticky>
</div>

The developer console shows that Sticky header has some weird left position which fixes itself after a while. How can I solve this issue?

vcarl commented

I'm not sure I'm understanding what's happening, could you add a screenshot of video capture of the behavior you're seeing?

smshahrukh commented

Here it is. The input box is wrapped into Sticky header. It moves to the right when transform is applied.
https://cl.ly/0G0q390i1m2n

vcarl commented

Looks to me like it's jumping to the left? I think I've run into this problem myself, try wrapping the the StickyContainer with a div and positioning that. When the Sticky gets stuck, it gets a width set equal to the measured value of the container, which can cause what you're seeing.

siakaramalegos commented

I had this same problem. When it stuck, both the sticky header and the scrollable content shifted to the right by a few pixels.

For the header, I think it had something to do with you setting the width. I needed it to be 100% because I have some absolutely positioned elements inside of the header. I also need to set both top AND left. I think those items might have also been causing the shift because when I changed them, it started working fine.

vcarl commented

Is this with the latest version of the library? I can't really provide support for anything < 6, I only recently began maintaining this and don't really have the bandwidth to learn all the previous versions.

siakaramalegos commented

For me, yes. But like I said, I think it might have been because other elements had different positioning, and I needed the header to change to 100% width.

vcarl commented

Yeah there are some quirks with the styling, a little bit more brittle than i'd like. I've had issues with the width as you say as well.

@smshahrukh did wrapping it work? I'm going to close this out in a few days, just don't want open issues lingering.

smshahrukh commented

@vcarl No, Wrapping did not work. I tested it with wrapping but it didn't work. Some left:330px are still added and position: fixed on the Sticky in the case.

yourmediafriend commented

I commented on a previous issue which was similar. I believe the error comes from the css transform changing the relative coordinates of the fixed element (http://maneeshchiba.com/article/css-transforms-fixed-positioning)

I did a quick hack to Sticky.js to calculate the left position using
this.placeholder.getClientRects() rather than this.placeholder.getBoundingClientRect()