Element(s) slightly jumping when sticked

[b44rd]

Hi, and thanks a lot for making this sweet directive!

I do, however notice that there is a subtile "jump" when activating/deactivating stickyness. I´m using Google Chrome, and the "jump" behaviour is reproducable in the demo/example as well.

Not 100% sure how to fix the issue yet, but it seems like the activate/deactivate of the stickyness do not listen to the scroll event in an optimal way somehow, as it seems like the placement of the placeholder happens too late some times.

[brunosfreitas]

I'm also dealing with this problem on a test project =(

[rleeson]

I found this problem appears for me in bottom sticky situations. The sticky element recalculates using current element height, which in my case changed. This causes a cascade of jumps in the differential between the original and sticky heights.

To resolve, I pulled the source directive into my project and latched the height while the element is stuck (in recomputeState):

this.state = Object.assign({}, this.state, { height: this.lastState.sticked ? this.state.height : this.getHeight(), width: this.getWidth(), xOffset: this.getXOffset(), placeholderElRect: this.getPlaceholderElRect(), containerElRect: this.getContainerElRect() });

This is valid for the majority of use cases, however, if someone is using the with consistently sized elements and relies on this during resizes, this would be a breaking change. I would argue resize is a different event and should follow a different execution path, and likely needs a functional change to reset stickiness on resize.

I entered a pull request to demonstrate what I did, and can discuss further adjustments there.

[mehwww]

I found this problem appears for me in bottom sticky situations. The sticky element recalculates using current element height, which in my case changed. This causes a cascade of jumps in the differential between the original and sticky heights.

Have your tried wrap your sticky element into a constant height wrapper? The wrapper remain the constant size but the content may vary as you need.

[simplenotezy]

I have the same issue, but it seems as though the demo has it fixed; atleast I can't reproduce it from the demo. See gif:

[b44rd]

@simplenotezy Recently implemented the exact same layout as you reference here, using position: sticky. It ended up quite well, but it is a matter of browser support; https://caniuse.com/#feat=css-sticky

[simplenotezy]

I noticed the bug I showed in the gif didn't happen on my laptops smaller screen only my second display. Anyhow I'm using chrome so don't thibk browser support is an issue

_{Sent with GitHawk}

[dscbirio]

@simplenotezy Did you solve the problem? Unfortunately, in my project I also have it :(