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.

Responsive offset prop

See original GitHub issue

Issue Description

I need to make the offset prop responsive in any way. I want the stickiness behaviour to be based on the height of 2 elements (header and subheader).

At the moment I’m trying to find a fixed value for the offset that works well across our supported devices.

The other quick solution, I have in mind is to have 2 separate sticky elements (one for desktop and one for tablet). I would really like to avoid doing this.

Thanks again for this awesome package. There are so few packages that deliver this in a small and convenient way. 👍

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

danielberndtcommented, Sep 12, 2018

Two approaches I could offer:

make the surrounding container responsive. e.g. <div style={{marginTop: '5vh'}}><StickyBox/></div>
Use something like react-media:

     <Media query="(max-width: 599px)">
        {matches =>
          <StickyBox offset={matches ? 20 : 40}/>
        }
      </Media>

0reactions

danielberndtcommented, Sep 12, 2018

No worries! And yes, so far this library concerned with just doing one thing reasonably well. Offering too many features would at some point probably be a bit too much to maintain 😃