add/remove classes to header on page scroll

menu-is-scrolling.js

menuIsScrolling: function() {
  var $body = $('body'),
      $header = $('header[role="banner"]'),
      lastScrollTop = 0;

  $(window).scroll(function(event){
    var st = $(this).scrollTop();
    if( st > 0 ) {
      $header.addClass( 'is-scrolling' );
    }
    if ( st > lastScrollTop ){
      // downscroll
      $header.removeClass( 'is-scrolling-up' );
    } else if( st == 0 ) {
      // at scrolltop
      $header.removeClass( 'is-scrolling is-scrolling-up' );
    } else {
      // upscroll
      $header.addClass( 'is-scrolling-up' );
    }
    lastScrollTop = st;
  });
}