question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding additional styling when <Sticky /> is stuck

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
AnnaChebacommented, Jan 18, 2018

@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>
0reactions
vcarlcommented, Feb 23, 2018

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found