NAVBAR WITH SCROLL

app.navbar.js

app.navbar = {
  init: function () {


    /* + 1. Navigation Bar Height & Header-Shiv (Plus )
    	======================================================================*/

    var root = document.documentElement;

    function navBarHeight() {
      var navHeight = document.querySelector(".headroom2");
      var navShiv = document.querySelector(".header-shiv");
      var logoHeight = document.querySelector(".logo-constrict");

      navHeight = navHeight.clientHeight;

      logoHeight = logoHeight.clientHeight;

      //      logoOverlap = logoHeight - navHeight;
      //
      //      if (logoOverlap > 0) {
      //        root.style.setProperty('--logo-overlap', logoOverlap + 'px');
      //      }

      navShiv.style.height = navHeight + 'px';
      root.style.setProperty('--nav-shiv', navHeight + 'px');

    }


    navBarHeight();

    window.addEventListener("resize", debounce(navBarHeight, 200));

    //DROPDOWN FIX
    //    var dropdown = document.getElementsByClassName('js-dropdown');
    //    if (dropdown.length > 0) { // init Dropdown objects
    //      for (var i = 0; i < dropdown.length; i++) {
    //        (function (i) {
    //          new Dropdown(dropdown[i]);
    //        })(i);
    //      }
    //    }


    //RUN FIXED NAV
    app.navbar.fixed();

  },
  fixed: function () {

    var headroom = document.querySelector(".headroom2");
    var navShiv = document.querySelector(".header-shiv");

    var new_scroll_position = 0;
    var last_scroll_position;


    window.addEventListener('scroll', fixedNav, {
      passive: true
    }, 300);


    function fixedNav() {
      last_scroll_position = window.scrollY;

      // Scrolling down
      if (new_scroll_position < last_scroll_position && last_scroll_position > 120) {
        headroom.classList.remove("slide-down");
        headroom.classList.add("slide-up");
        navShiv.classList.remove("slide-down");
        navShiv.classList.add("slide-up");
        //   headroom.classList.remove('fixed-hide');
        // Scrolling up
      } else if (new_scroll_position > last_scroll_position) {
        headroom.classList.remove("slide-up");
        headroom.classList.add("slide-down");
        navShiv.classList.remove("slide-up");
        navShiv.classList.add("slide-down");

        //        
        //        scrollStop(function () {
        //          console.log('stop');
        //          headroom.classList.remove('fixed-hide');    
        //        },500);

      }
      // TOP
      if (last_scroll_position === 0) {
        headroom.classList.remove("slide-down");
        headroom.classList.remove("slide-up");
        navShiv.classList.remove("slide-up");
        navShiv.classList.remove("slide-down");
        headroom.classList.remove('fixed-hide');

      }

      /*!
       * Run a callback function after scrolling has stopped
       * (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
       * @param  {Function} callback The callback function to run after scrolling
       * @param  {Integer}  refresh  How long to wait between scroll events [optional]
       */


      new_scroll_position = last_scroll_position;
    }


  },
  exit: function () {
    //  console.log('exit');  
    app.navbar.fixed = function () {
      return false;
    }

  }
}