Adding additional styling when <Sticky /> is stuck
Closed this issue · 4 comments
darrenbarklie commented
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!
darrenbarklie commented
@bernardoatworkpop - An example would be great if you have one, as I'm still learning a lot with React. Thanks!
AnnaCheba commented
@bernardoatworkpop would be great if you can provide an example. Thanks in advance!
AnnaCheba commented
@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.