stickybits
stickybits copied to clipboard
Add spacer element for non-sticky situations
Thank you very much for amazing library!
Fixes
- This PR fixes a problem when using configuration
useFixed: trueor IE11. - In these situations,
position: stickyis replaced with other styles,fixedandabsolute. However,position: stickykeeps gap where the element was originally located and the others don't.fixedandabsoluteshorten the element's parent height, and derails appearance and the logic of changing state (default,sticky,stuckin the implementation ). reproduction: https://codepen.io/ykdr2017/pen/xxwGEbE
Proposed Changes
- Inserted an element called
spacerfor 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.
@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 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
@ykdr2017 I'm going to pull your PR and make a few tweaks within the next few days.
Thanks again!