"stickiness" not being activated

[ThunderDev1]

I tried a simple example

<Sticky>
    <div style={{background: 'red'}}>test</div>
</Sticky>

It seem to add the proper divs and styles

<div style="min-height: 20px;">
    <div class="" style="transform: translateZ(0px);">
        <div style="background: red;">test</div>
    </div>
</div>

But when I scroll nothing happens, the fixed class is not being added so my test div remains hidden. Are there any cases when this component does not work ? (like particular css in parent)

Thanks

[gm0t]

Hi @ThunderDev1! There shouldn't be any special cases... But there is always chance for bug :) Could you please provide more information or may be create some playground?

[seyyed-sina]

same issue here

[flieks]

same issue

[marharyta]

Having the same issue here

[gm0t]

hey @marharyta, could you please provide a bit more examples on how you use it and what exactly is your problem? Also, which version are you using?

[capi1O]

Same issue here (empty class and style=transform: translateZ(0px) on the sticky div created by react-sticky-el).

Using version 2.0.9

This was due to a layout problem, the container where my content was (including <Sticky />) had a height of 100vh, it was actually the body which was scrolling (not the container).

[ggregoire]

@xididri did you find a solution to make it work while keeping 100vh on the container?

[capi1O]

Basically the solution in my case was to use a simpler layout. I have given you access to the project repo so you can have a look. Not sure it will apply to your case though.

(edit: You need to check issue 263 which was fixed by commit ee2dc5f84025c061b9963e279a1b7b83f5e05f20)