Adding additional styling when <Sticky /> is stuck
See original GitHub issueI 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!
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Targeting position:sticky elements that are currently in a 'stuck ...
Stick the element just out of its container with top: -2px , and then target via the stuck attribute... nav { background: magenta;...
Read more >How to Detect When a Sticky Element Gets Pinned - CSS-Tricks
Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections...
Read more >An event for CSS position:sticky - Chrome Developers
One of the practical limitations of using CSS sticky position is that it doesn't provide a platform signal to know when the property...
Read more >How to target 'stuck' sticky elements in React
When an element is using position: sticky , you might want to apply different styles when it's stuck versus when it's not.
Read more >How to Fix Issues With CSS Position Sticky Not Working?
Learn possible reasons why CSS position sticky might not be working for you.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@bernardoatworkpop don’t worry, I found it)) Example:
@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.