Adds a class to hide the nav at a specific scrollDelta, add class to show it upon beginning to scroll back up again.

navScroll.js

import $ from 'jquery';

export default {
  collapseScrollTolerance: 100,
  direction: 1,
  scrolled: 0,
  header: '.js-site-header',

  init() {
    this.header = $(this.header);
    this.bindScrollEvents();
  },

  bindScrollEvents() {
    $(window).on('scrolldelta', (e) => {
      const newDirection = e.scrollTopDelta > 0 ? 1 : 0;
      if (newDirection !== this.direction) {
        this.scrolled = 0;
        this.direction = newDirection;
      } else {
        this.scrolled += Math.abs(parseInt(e.scrollTopDelta, 10));
      }

      if (this.scrolled > this.collapseScrollTolerance || e.scrollTop < 90) {
        if (this.direction > 0 && e.scrollTop > 90) {
          this.header.addClass('has-scrolled');
        } else {
          this.header.removeClass('has-scrolled');
        }
      }
    });
  },
};

/* eslint-disable */
$.event.special.scrolldelta = {
  delegateType: 'scroll',
  bindType: 'scroll',
  handle: function (event) {
    var handleObj = event.handleObj;
    var targetData = jQuery.data(event.target);
    var ret = null;
    var elem = event.target;
    var isDoc = elem === document;
    var oldTop = targetData.top || 0;
    var oldLeft = targetData.left || 0;
    targetData.top = isDoc ? elem.documentElement.scrollTop + elem.body.scrollTop : elem.scrollTop;
    targetData.left =
      isDoc ? elem.documentElement.scrollLeft + elem.body.scrollLeft : elem.scrollLeft;
    event.scrollTopDelta = targetData.top - oldTop;
    event.scrollTop = targetData.top;
    event.scrollLeftDelta = targetData.left - oldLeft;
    event.scrollLeft = targetData.left;
    event.type = handleObj.origType;
    ret = handleObj.handler.apply(this, arguments);
    event.type = handleObj.type;
    return ret;
  },
};