search

codecks-io / react-sticky-box

Sticky boxes for contents of all sizes
https://react-sticky-box.codecks.io/
ISC License
469 stars 44 forks source link

Stickiness issue with css grid #34

Closed ruijdacd closed 5 years ago

ruijdacd commented 5 years ago

Hi again,

I've been loving the work you're doing react-sticky-box and with the latest updates I've noticed such performance gains in the projects I've used it.

With that being said, I have found an issue regarding the use of react-sticky-box inside a css grid (display: grid);

Here it's a codesandbox with the issue detailed: https://codesandbox.io/s/p982r552lq

Basically, when the item's height increases to a value above the viewport height, the stickiness goes away and the item's position is reset to the position defined in the grid area.

ruijdacd commented 5 years ago

So I've been thinking about the issue itself, and I've come up with a quick solution.

I've updated the codesandbox with a workaround, but I also wanted to know if you would be available to analyse the issue on your side too.

edgar-raweng commented 5 years ago

Hi @ruijdacd can you share your workaround please?, I have a similar situation and I think my solution is pretty much complicated

ruijdacd commented 5 years ago

The workaround for me was having a conditional wrap for the sticky element. The codesandbox is updated with the workaround I came up with

ruijdacd commented 5 years ago

@edgar-raweng could you share your solution?