sticky-events.js
function addSentinels(container, className, stickySelector = STICKY_SELECTOR) {
  return Array.from(container.querySelectorAll(stickySelector)).map((stickyElement) => {
    const sentinel = document.createElement('div');
    const stickyParent = stickyElement.parentElement;

    // Apply styles to the sticky element

    stickyElement.style.cssText = `
      position: -webkit-sticky;
      position: sticky;
    `;

    // Apply default sentinel styles

    sentinel.classList.add(ClassName.SENTINEL, className);

    Object.assign(sentinel.style,{
      left: 0,
      position: 'absolute',
      right: 0,
      visibility: 'hidden',
    });

    switch (className) {
      case ClassName.SENTINEL_TOP: {
        stickyParent.insertBefore(sentinel, stickyElement);

        // Apply styles specific to the top sentinel

        Object.assign(
          sentinel.style,
          getSentinelPosition(stickyElement, sentinel, className),
          { position: 'relative' },
        );

        break;
      }

      case ClassName.SENTINEL_BOTTOM: {
        stickyParent.appendChild(sentinel);

        // Apply styles specific to the bottom sentinel

        Object.assign(sentinel.style, getSentinelPosition(stickyElement, sentinel, className));

        break;
      }
    }

    return sentinel;
  });
}
function addSentinels(container, className, stickySelector = STICKY_SELECTOR) {
  return Array.from(container.querySelectorAll(stickySelector)).map((stickyElement) => {
    const sentinel = document.createElement('div');
    const stickyParent = stickyElement.parentElement;

    // Apply styles to the sticky element

    stickyElement.style.cssText = `
      position: -webkit-sticky;
      position: sticky;
    `;

    // Apply default sentinel styles

    sentinel.classList.add(ClassName.SENTINEL, className);

    Object.assign(sentinel.style,{
      left: 0,
      position: 'absolute',
      right: 0,
      visibility: 'hidden',
    });

    switch (className) {
      case ClassName.SENTINEL_TOP: {
        stickyParent.insertBefore(sentinel, stickyElement);

        // Apply styles specific to the top sentinel

        Object.assign(
          sentinel.style,
          getSentinelPosition(stickyElement, sentinel, className),
          { position: 'relative' },
        );

        break;
      }

      case ClassName.SENTINEL_BOTTOM: {
        stickyParent.appendChild(sentinel);

        // Apply styles specific to the bottom sentinel

        Object.assign(sentinel.style, getSentinelPosition(stickyElement, sentinel, className));

        break;
      }
    }

    return sentinel;
  });
}
function addSentinels ( container , className , stickySelector = STICKY_SELECTOR ) { return Array . from ( container . querySelectorAll ( stickySelector ) ) . map ( ( stickyElement ) => { const sentinel = document . createElement ( 'div' ) ; const stickyParent = stickyElement . parentElement ; // Apply styles to the sticky element stickyElement . style . cssText = ` ` ; // Apply default sentinel styles sentinel . classList . add ( ClassName . SENTINEL , className ) ; Object . assign ( sentinel . style , { left : 0 , position : 'absolute' , right : 0 , visibility : 'hidden' , } ) ; switch ( className ) { case ClassName . SENTINEL_TOP : { stickyParent . insertBefore ( sentinel , stickyElement ) ; // Apply styles specific to the top sentinel Object . assign ( sentinel . style , getSentinelPosition ( stickyElement , sentinel , className ) , { position : 'relative' } , ) ; break ; } case ClassName . SENTINEL_BOTTOM : { stickyParent . appendChild ( sentinel ) ; // Apply styles specific to the bottom sentinel Object . assign ( sentinel . style , getSentinelPosition ( stickyElement , sentinel , className ) ) ; break ; } } return sentinel ; } ) ; }
Add sticky sentinels

@param {Element|HTMLDocument} container
@param {String} className
@param {string} stickySelector     The CSS selector applied to the sticky DOM elements
@returns {Array<Element>}
Add sticky sentinels