search

gm0t / react-sticky-el

MIT License
256 stars 47 forks source link

Possible to Change Top/Bottom position to create offset from window border while scrolling? #81

Open kirill-develops opened 2 years ago

kirill-develops commented 2 years ago

noticed in the documentation the following styling is applied when the 'stickyness' is in effect:

  position: fixed;
  top: 0;
  left: 0;
  width: <width that was before 'stickiness'>

I'm wondering if it's possible to provide a different top position to give the Sticky element some padding.

One other question: I noticed there is the hideOnBoudryHit prop, is there a similar disableOnBoundryHit. My bug is when the Sticky element reaches the boundryElement, it continues past the boundary before refreshing back to the end of the boundryElement, unlike when it reaches the start of the boundryElement and has a hard stop in place. Noticed the hideOnBoundryHit responds immediately at the end of the boundryElement however I don't want it to disappear, instead to wait there for the user until they scroll back up.

I also tried defining the parent section component that houses the boundaryElement as scrollElement prop, however it made my Sticky element static without any movement. Not sure how to properly use this prop.

Thanks again for a wonderful wrapper element!

georgecartridge commented 10 months ago

noticed in the documentation the following styling is applied when the 'stickyness' is in effect:

  position: fixed;
  top: 0;
  left: 0;
  width: <width that was before 'stickiness'>

I'm wondering if it's possible to provide a different top position to give the Sticky element some padding.

I know this was posted a while ago but a workaround I'm using is to create an invisible div element above the content with its height set to the padding I want.

So something like this:

<Sticky>
     <div className="opacity-0 h-12"></div>
     <div>content here...</div>
</Sticky>