Add spacer element for non-sticky situations

src/stickybits.js

@@ -164,13 +164,17 @@ class Stickybits {
       - offset = number
       - stickyStart = number
       - stickyStop = number
+      - spacer = dom element | null
+      - spacerHeight = number
+      - spacerDisplay = 'string'
     - returns an instance object
   */
   addInstance (el, props) {
     const item = {
       el,
       parent: el.parentNode,
       props,
+      spacer: null,
     }
     if (props.positionVal === 'fixed' || props.useStickyClasses) {
       this.isWin = this.props.scrollEl === window
@@ -181,6 +185,15 @@ class Stickybits {
       item.stateChange = 'default'
       item.stateContainer = () => this.manageState(item)
       se.addEventListener('scroll', item.stateContainer)
+      if (!props.noStyles) {
+        item.spacer = item.el.cloneNode()
+        // Avoid duplicate selectors
+        item.spacer.removeAttribute('id')
+        item.spacer.removeAttribute('class')
+        item.parent.insertBefore(item.spacer, item.el)
+        item.spacer.style.visibility = 'hidden'
+        item.spacer.style.display = 'none';
+      }
     }
     return item
   }
@@ -228,8 +241,11 @@ class Stickybits {
     computeScrollOffsets for Stickybits
     - defines
       - offset
-      - start
-      - stop
+      - stickyStart
+      - stickyStop
+      - stickyChange
+      - spacerHeight
+      - spacerDisplay
   */
   computeScrollOffsets (item) {
     const it = item
@@ -252,6 +268,8 @@ class Stickybits {
     it.stickyStop = isTop
       ? parentBottom - (el.offsetHeight + it.offset)
       : parentBottom - window.innerHeight
+    it.spacerHeight = el.offsetHeight
+    it.spacerDisplay = window.getComputedStyle(el).display
   }
 
   /*
@@ -287,6 +305,8 @@ class Stickybits {
     const start = it.stickyStart
     const change = it.stickyChange
     const stop = it.stickyStop
+    const spacerHeight = it.spacerHeight
+    const spacerDisplay = it.spacerDisplay
     // cache props
     const pv = p.positionVal
     const se = p.scrollEl
@@ -358,12 +378,25 @@ class Stickybits {
             bottom: '',
             [vp]: `${p.stickyBitStickyOffset}px`,
           },
+          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',
+            }),
+          },
           classes: { [sticky]: true },
         },
         default: {
           styles: {
             [vp]: '',
           },
+          spacerStyles: {
+            display: 'none',
+          },
           classes: {},
         },
         stuck: {
@@ -379,6 +412,10 @@ class Stickybits {
               bottom: '0',
             } : {}),
           },
+          spacerStyles: {
+            height: `${spacerHeight}px`,
+            display: spacerDisplay,
+          },
           classes: { [stuck]: true },
         },
       }
@@ -403,12 +440,13 @@ class Stickybits {
     ---
     - apply the given styles and classes to the element
   */
-  applyStyle ({ styles, classes }, item) {
+  applyStyle ({ styles, classes, spacerStyles }, item) {
     // cache object
     const it = item
     const e = it.el
     const p = it.props
     const stl = e.style
+    const sp = it.spacer
     // cache props
     const ns = p.noStyles
 
@@ -438,6 +476,12 @@ class Stickybits {
     for (const key in styles) {
       stl[key] = styles[key]
     }
+    if (sp) { 
+      // eslint-disable-next-line no-unused-vars
+      for (const key in spacerStyles) {
+        sp.style[key] = spacerStyles[key]
+      }
+    }
   }
 
   update (updatedProps = null) {
@@ -472,6 +516,10 @@ class Stickybits {
     )
 
     this.toggleClasses(e.parentNode, p.parentClass)
+
+    if (instance.spacer) {
+      instance.parent.removeChild(instance.spacer)
+    }
   }
 
   /*

tests/unit/test.stickybits.js

@@ -184,6 +184,79 @@ test("stickybits doesn't change position style if noStyles is true", () => {
   expect(parent.style['position']).toBe(positionStyle);
 })
 
+test("stickybits creates spacer if the element is fixed", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent', { useFixed: true });
+
+  const item = stickybit.instances[0];
+  item.spacer.classList.add('spacer');
+
+  expect(item.spacer).not.toBe(null);
+  expect(document.querySelectorAll('.spacer').length).toBe(1);
+})
+
+test("stickybits doesn't display spacer if the element is fixed and state becomes `default`", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent', { useFixed: true });
+
+  const item = stickybit.instances[0];
+
+  expect(item.state).toBe('default');
+  expect(item.spacer.style['display']).toBe('none');
+})
+
+test("stickybits displays spacer if the element is fixed and state becomes `sticky`", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent', { useFixed: true });
+
+  const item = stickybit.instances[0];
+  stickybit.isWin = false;
+  item.props.scrollEl = { scrollTop: 100 };
+  item.stickyStart = 0;
+  item.stickyStop = 200;
+  stickybit.manageState(item)
+
+  expect(item.state).toBe('sticky');
+  expect(item.spacer.style['display']).toBe('block');
+})
+
+test("stickybits displays spacer if the element is fixed and state becomes `stuck`", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent', { useFixed: true });
+
+  const item = stickybit.instances[0];
+  stickybit.isWin = false;
+  item.props.scrollEl = { scrollTop: 200 };
+  item.state = 'sticky';
+  item.stickyStart = 0;
+  item.stickyStop = 200;
+  stickybit.manageState(item)
+
+  expect(item.state).toBe('stuck');
+  expect(item.spacer.style['display']).toBe('block');
+})
+
+test("stickybits removes spacer when the instance is removed", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent', { useFixed: true });
+
+  const item = stickybit.instances[0];
+  item.spacer.classList.add('spacer');
+  stickybit.removeInstance(item);
+
+  expect(document.querySelectorAll('.spacer').length).toBe(0);
+})
+
+test("stickybits doesn't create spacer if the element isn't fixed", () => {
+  document.body.innerHTML = '<div id="parent"></div>'
+  const stickybit = stickybits('#parent');
+
+  const item = stickybit.instances[0];
+
+  expect(item.spacer).toBe(null);
+  expect(document.querySelectorAll('div').length).toBe(1);
+})
+
 test('stickybits .addInstance interface', () => {
   document.body.innerHTML = '<div id="manage-sticky"></div>'
   const e = document.getElementById('manage-sticky')