bugfix: invalid positioning when in relative mode

[ignatiusreza]

I noticed two issues when Sticky is used in relative mode:

• position of sticky element in relative to its container should not changed when scrolling outside of the container
• bottomOffset should be respected

unfortunately, to avoid some UI artifact, I have to use clip-path to fix the second issue with bottomOffset, which are supported in most major browser except ie and edge.. if this is not acceptable, then we would need to add position: relative into the container element.. wdyt?

I also updated the example section in a separate commit, so that we can switch between commits to see how the fix changes the behavior..

I noticed several other issues opened which might be related, would be great to get more eyes to test if this changes also fix those issues..

To clarify the issue, please see the following screencast:

• for the first issue:

  • before:

    

  • after:

    

• for the second issue:

  • before:

    

  • after:

    

[vcarl]

Hmm, could you add more information about the second bug? I'm able to reproduce the first (great catch!) but am not sure what the scenario is in the second.

[ignatiusreza]

@vcarl it's to fix compatibility when using bottomOffset together with relative.. here're codesandboxes which would hopefully help clear up the case:

• master: https://codesandbox.io/s/kxz22r7j1o
• pr: https://codesandbox.io/s/p3r727140j

btw, issue #235 might be talking about the same thing?

[ignatiusreza]

@vcarl sorry for pinging.. want to check if the sample above is understandable?

[vcarl]

Yep, I see what's going on! Appreciate the clarification. I need to find some time to review this before merging.