Adding a margin Top attribute

[ghost]

marginTop (default: 0)

Sticky state will be triggered as usual only it will keap a margin from the top with the inputted value.

app.js

<StickyContainer>
  ...
  <Sticky marginTop={80}>
    { props => (...) }
  </Sticky>
  ...
</StickyContainer>

The above would result in an element that becomes sticky once its top is greater than or equal to 0px but it will scroll away from the top of the <StickyContainer /> by 80px.

[vcarl]

Hm how does this differ from topOffset?

[ghost]

the topOffset delays the event triggering by an offset of (x px) whereas the marginTop attributes don't delay the event triggering but keep the sticky object at an (x px) distance from the top. this is the behavior obtained by the topOffset attribute: and this is the behavior obtained by the marginTop attribute:

Thanks for asking

[vcarl]

Hm when is this desirable behavior? This looks to me like it would make the content snap into place, jumping the size of the offset. Usually in my experience that's something to be avoided.

[ghost]

Well, this behavior is desired when you have a sticky navbar on top just like the shown example and no the changes were made to the code so it does not snap you can check out on this page as long -as it's online that is-

[vcarl]

I don't see any top margin on that page, and I see a number of scrolling bugs. I'm still not really sure what the intent here is, could you please add some code sandbox demos of what you can't accomplish? I'm going to close this but am happy to reopen if you can provide that information.

[simjoeweb]

Need this as well.