Responsive offset prop

[Rui Duarte]

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

[Daniel]

Two approaches I could offer:

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

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

[Rui Duarte]

The second approach seems the better, because it doesn’t rely on the viewport height.

I just realised I have another question. Is it possible to disable this on a certain breakpoint?

[Daniel]

The vw in the first example was just one example of responsiveness. You could also used a <div className="my-responnsive-div"> and define media queries for the class.

By disabling do you mean not showing the box at all? Or just disabling the stickyness effect? For the latter you could do something like this:

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

[Rui Duarte]

I was hoping that, that feature was already in the package, but I guess it’s a nice way to do it.

Thanks for your quick replies and help. 👍

[Daniel]

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 :)