Cacher is the code snippet organizer for pro developers

class StickyAppbar {
  constructor() {
    StickyAppbar._prevScroll = 0
    this._holder = document.querySelector('.ui-sticky-appbar')
    this._elem = this._holder.firstElementChild
    this._elem.style.willChange = 'transform'
    this._holder.style.height = `${this._elem.offsetHeight}px`
    this._parent = document.documentElement
    this._startOffset = document.documentElement.clientHeight
    this._direction = undefined;
    this._isSticky = false
    this._render()
    document.addEventListener('scroll', this._render.bind(this))
  }

  _render() {
    this._getDirection()

    switch (this._direction) {

      case 'bottom':
        if (!this._isSticky && this._parent.scrollTop > this._startOffset) this._makeSticky()
        if (this._isSticky) this._hide()
        break

      case 'top':
        if (this._isSticky) this._show()
        if (this._isSticky && this._holder.getBoundingClientRect().top >= 0) this._clearSticky()
        break
    }
  }

  _makeSticky() {
    this._elem.classList.add('ui-sticky-appbar__elem_sticky')
    this._isSticky = true
  }

  _hide() {
    this._elem.classList.remove('ui-sticky-appbar__elem_visible')
  }

  _show() {
    this._elem.classList.add('ui-sticky-appbar__elem_visible')
  }

  _clearSticky() {
    this._elem.classList.remove('ui-sticky-appbar__elem_sticky')
    this._elem.classList.remove('ui-sticky-appbar__elem_visible')
    this._isSticky = false
  }

  _getDirection() {
    StickyAppbar._prevScroll < this._parent.scrollTop
      ? this._direction = 'bottom'
      : this._direction = 'top'
    StickyAppbar._prevScroll = this._parent.scrollTop
  }
}

new StickyAppbar()