search

gm0t / react-sticky-el

MIT License
251 stars 47 forks source link

sticky component has fixed position even when you scroll outside of the area wanted #14

Closed stmoreau closed 6 years ago

stmoreau commented 6 years ago

So basically it works great, but I have a slight issue.

Sticky element sticks on the top of the div that I have set. Then if I continue to scroll down the page, while the Sticky element has the class sticky the element goes down as well instead of sticking where it was supposed to.

From your basic example, I 've seen that the sticky element has this inline style transform: translateZ(0px); top: 144px; position: fixed; width: 332.797px; from which the top changes dynamically when you scroll down the page itself. I can't reproduce that behaviour with the exact same code.

My code is pretty simple:

<div className="event-log-expanded-panel">
    <div className="conversation-names">
        <Sticky boundaryElement=".conversation-names" scrollElement=".event-log-expanded-panel">
              .........
        </Sticky>
    </div>
</div>

Your help would be much appreciated!

stmoreau commented 6 years ago

@gm0t

gm0t commented 6 years ago

@stmoreau could you please create plunkr/codepen/or any other example?

stmoreau commented 6 years ago

it was some random bug with display: flex apparently. Fixed it! thank you so much @gm0t