export default {
  mounted() {
    let self = this
    let didScroll
    let lastScrollTop = 0
    let delta = 5
    let navbarHeight = jQuery('header').outerHeight() || 50

    jQuery(window).scroll(function(event) {
      didScroll = true
    })

    setInterval(function() {
      if (didScroll) {
        hasScrolled()
        didScroll = false
      }
    }, 100)

    function hasScrolled() {
      let st = jQuery(document).scrollTop()

      // Make sure they scroll more than delta
      if (Math.abs(lastScrollTop - st) <= delta) return

      // If they scrolled down and are past the navbar, add class .nav-up.
      // This is necessary so you never see what is "behind" the navbar.
      if (st > navbarHeight) {
        jQuery(self.$el).addClass('scroll-passed-header')
      } else {
        jQuery(self.$el).removeClass('scroll-passed-header')
      }

      if (st > lastScrollTop) {
        // Scroll Down
        jQuery(self.$el)
          .removeClass('scrolling-down')
          .addClass('scrolling-up')
      } else {
        // Scroll Up
        if (st + jQuery(window).height() < jQuery(document).height()) {
          jQuery(self.$el)
            .removeClass('scrolling-up')
            .addClass('scrolling-down')
        }
      }

      lastScrollTop = st
    }
  },
}
