captivationsoftware/react-sticky

Adding additional styling when <Sticky /> is stuck

Closed this issue · 4 comments

I have a quick question; how do I inject additional styles on to the <Sticky /> element when isSticky is triggered. In practice, I want to add box-shadow to my navigation element, when stuck. Thanks in advance!

@bernardoatworkpop - An example would be great if you have one, as I'm still learning a lot with React. Thanks!

@bernardoatworkpop would be great if you can provide an example. Thanks in advance!

@bernardoatworkpop don't worry, I found it))
Example:

<StickyContainer>
    <Sticky>
        {
            ({isSticky, style}) => <div className={isSticky ? 'sticky' : ''} style={{...style}}>...some your code</div>
        }
    </Sticky>
    <div className="my-container">
        ...some your code
    </div>
</StickyContainer>
vcarl commented

@AnnaCheba's got it! That's a good way to add styles. I'm going to close this issue since it has a good solution.