Add spacer element for non-sticky situations

[ykdr8]

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.

[yowainwright]

@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?

[ykdr8]

@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

[yowainwright]

Hey, thanks @ykdr2017 for your thoughtful PR and comments. I wrote some quick notes. Lets see where we get from there. 🙏

[yowainwright]

This should be controlled by the plugin.

• It should go right into position: fixed code (not optional).
• It should provide a css class stickybits-item-stub, or something like that.
• The inline css of the stub should have a height set to the calculated stickybit item height.
• The stub should be set to display:block; vs display:none when the stickybit item is set to position: fixed (but I know it is a bit more nuanced than that 😄).

See Fixed Sticky for reference.

[ykdr8]

@yowainwright Thank you for comments 👍 Let me discuss before fixing.

• It should go right into position: fixed code (not optional).

I agree that in terms of minimizing responsibility of instance. However I feel a bit uncertain that stickybits has to get stub element reference from current DOM tree again when destroying instance.
fixed-sticky does so , and it can lose the reference when re-getting. ( I know it's very rare case, but possible because DOM tree should be regarded as a global variable)

• It should provide a css class stickybits-item-stub , or something like that.

OK, I'll add it after the other discussion!

• The inline css of the stub should have a height set to the calculated stickybit item height.
• The stub should be set to display:block; vs display:none when the stickybit item is set to position: fixed (but I know it is a bit more nuanced than that 😄).

They seem to be implemented around here, could you tell me if it is different from you intended ?

stickybits/src/stickybits.js

Lines 381 to 390 in cdc8a85

	spacerStyles: {
	...(pv === 'fixed' ? {
	height: `${spacerHeight}px`,
	display: spacerDisplay,
	} : {
	// Omit spacer if position is not 'fixed',
	// even if position of state stuck is 'absolute'
	display: 'none',
	}),
	},

Note: spacerDisplay is assumed it can be block or something else, such as table-header-group .

[yowainwright]

Sorry @ykdr2017, I was just writing out instructions. 😃

As this issue supports a very small (but important use-case), I want to ensure that the footprint of this update is small.

[yowainwright]

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

Thanks again!