stickybits icon indicating copy to clipboard operation
stickybits copied to clipboard

Add spacer element for non-sticky situations

Open ykdr8 opened this issue 5 years ago • 3 comments

Thank you very much for amazing library!

Fixes

  • This PR fixes a problem when using configuration useFixed: true or IE11.
  • In these situations, position: sticky is replaced with other styles, fixed and absolute. However, position: sticky keeps gap where the element was originally located and the others don't. fixed and absolute shorten the element's parent height, and derails appearance and the logic of changing state ( default, sticky, stuck in the implementation ). reproduction: https://codepen.io/ykdr2017/pen/xxwGEbE

Proposed Changes

  • Inserted an element called spacer for non-sticky situations. The spacer has the same height as the target element, and the parent will keep its height.
  • This approach may be just one of many ways. Any alternatives or problems are welcome.

ykdr8 avatar Apr 13 '20 00:04 ykdr8

@ykdr2017 Thank you so much for the thoughtful description, the codepen and the PR! Let's a get a similar feature in for sure.

Question: Can padding-top be added to the patent to match the sticky element's height?

yowainwright avatar Apr 13 '20 02:04 yowainwright

@yowainwright Thank you for quickly replying.

I have considered to add padding once, but I think padding may be not useful in certain cases. One of them is the case there is another content just above stickybit. The gap should be created between stickybit and content below, but it seems to be hard to do by the approach of adding padding to the parent.

Especially if stickyBitStickyOffset is set, it could be visible that upper content and the content under stickybit are glued. It seems to be hard to resolve by parent padding.

stickyBitStickyOffset example: https://codepen.io/ykdr2017/pen/qBOdPXQ

ykdr8 avatar Apr 13 '20 04:04 ykdr8

@ykdr2017 I'm going to pull your PR and make a few tweaks within the next few days.

Thanks again!

yowainwright avatar Nov 28 '20 19:11 yowainwright