Styling of sticky

[judygab]

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 <Sticky> in the same <StickyContainer> side by side. I've tried and one overlaps another one.

[annetters]

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.

[annetters]

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;}