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

Doesn't work #86

Closed kopyl closed 1 year ago

kopyl commented 1 year ago

In this code it doesn't work: https://i.imgur.com/2dtQdih.png Why? How to make it work? I see you just apply the position sticky, right? But sticky can't work if an element is not in the body directly.

I've seen this on your website:

Make sure that the is only as high as its content, and not as high as the parent node... Here is my website: https://i.imgur.com/kifESF8.jpg

danielberndt commented 1 year ago

In your situation ReactStickyBox won't bring you any advantages. As the button will never be bigger than the viewport, it'll always apply style="position: sticky; top:0;" to your element.

So in your case the simplest solution would be to replace

<StickyBox>
   <button/>
</StickyBox>

with

<div style={{position: "sticky", top: 0 }}>
   <button/>
</div>

As to why it doesn't work: Double check if there's some parent element that defines an overflow: "hidden". The sticky position won't work in this case.

danielberndt commented 1 year ago

Closing due to inactivity. Feel free to re-open if you have more feedback.