simple sticky scrolling header

header.js

/* global $ */
import throttle from 'raf-throttle'

export default class Header {
  constructor (el) {
    this.el = el
    this.hiddenClass = 'hidden'
  }

  stick () {
    if (this.el.hasClass('Header--Sticky')) {
      $('html').addClass('em-sticky')
    }

    $(window).on(
      'scroll',
      throttle(() => {
        this.onScroll()
      })
    )
  }

  onScroll () {
    const y = window.scrollY
    const h = this.el.height()
    const hasClass = this.el.hasClass(this.hiddenClass)

    if (y <= h && hasClass) {
      this.el.removeClass(this.hiddenClass)
    }

    if (y > h) {
      if (y > this._y && !hasClass) {
        this.el.addClass(this.hiddenClass)
      }

      if (y < this._y && hasClass) {
        this.el.removeClass(this.hiddenClass)
      }
    }

    this._y = y
  }
}