Simple & pure JS sticky

README.md

Will stick vertically element with class "sticky-item".

Usage is for Table > sticky cells, so this code check element left to create sticky groups.

Sticky.css

.sticky-fixed {
  position: fixed;
  top: 5px;
  background: white;
}

Sticky.js

const getElementAbsoluteOffset = (el) => {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

export default class Sticky {

  constructor() {
    this.items = []

    this.handleWindowScroll = this.handleWindowScroll.bind(this)
  }

  start() {
    this.end()

    this.windowOnScrollListener = window.addEventListener("scroll", this.handleWindowScroll)
  }

  end() {
    window.removeEventListener("scroll", this.handleWindowScroll)
  }

  handleWindowScroll(e) {
    const windowY = window.pageYOffset
    var lastStickyFound = {}

    const items = [...document.getElementsByClassName("sticky-item")]
                    .map(element => ({
                      ...getElementAbsoluteOffset(element.parentElement.parentElement),
                      cell: element.parentElement.parentElement,
                      element: element,
                     classList: element.classList
                    }))
                    .sort((a, b) => b.top - a.top)

    for (var i in items) {
      const {classList, top, left} = items[i]

      if (top <= windowY && !lastStickyFound.hasOwnProperty(left)) {
          classList.add("sticky-fixed")

          lastStickyFound[left] = "ok"
      } else {
        classList.remove("sticky-fixed")
      }
    }
  }

}