captivationsoftware/react-sticky

Styling of sticky

judygab opened this issue · 2 comments

I'm submitting a feature request

Code Sandbox

So currently if I pass any additional styling to {style} it updates the style if the container even when it's not sticky. Is there a way to change the style of a component only when it sticks?
And another thing related to this would be how to use to in the same side by side. I've tried and one overlaps another one.

It would be great to apply certain styles depending on if the item is sticky or not. Or at least the ability to toggle a CSS class.

Hi @judygab,

I was able to do this with a CSS class by using the built-in isSticky property. Example:

<StickyContainer>
    <Sticky>
        {({ style, isSticky }) => (
            <div style={{ ...style }} className={(isSticky ? 'is-sticky' : 'not-sticky')}>
                <ProfileHeader />
            </div>
        )}
    </Sticky>
    <div>Stuff that does not stick goes here.</div>
<StickyContainer>

Then your CSS class would be something like...

.is-sticky {background: red;}
.not-sticky {background: blue;}