Sticky header que cambie de color solo con scroll up

[Ferdinand1945]

Hola amigos, tengo una duda, estoy trabajando con un sticky header muy sencillo en js con .addClass y removeClass y CSS. Mi problemita es el siguiente, quiero que el sticky header sea gris en el top de la pagina --> con scroll down desaparece --> con scroll up aparece pero en vez de gris, negro --> por ultimo cuando llega al top de la pagina se vuelve gris de nuevo. hasta he logrado que con scroll up se haga negro pero aun no logro que se vuelva gris cuando llega al top de la pagina... me podrian explicar como? les dejo el codigo mas el css para que lo vean y si tienen un tiempito me ayuden cone esta tonteria :)
Gracias a todos!

Código:

// Script para esconder header con scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

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

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // asegurarse que se haga scroll mas que delta
    if (Math.abs(lastScrollTop - st) <= delta) return;
    
    // necesario para no ver lo que haya atras de la nav-bar
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down-b');
        }
    }
    
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down 
        $('header').removeClass('nav-down-b').addClass('nav-up');
    }
    else {
        // Scroll Up (este ultimo estoy muy inseguro)
        if(st >= $(document).height()) {
            $('header').removeClass('nav-down-b').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

El CSS se basa en 4 clases

Código:

header {
 position: fixed;
 top: 0;
 transition: top 0.2s ease-in-out;
 width: 100%;
 height: 55px;
 background-color: #1c1a1b;
 z-index: 3;
 margin-bottom: 42px;
}

Código:

.nav-up {
 top: -55px; background-color: #eee;
}
 .nav-down {top:0px; background-color: #eee;}

 .nav-down-b {top:0px; background-color: #1c1a1b;}

Asi se ve el html:

Código HTML:

<header class="nav-down clearfix"> 

      <div class="container">
          <div class="pull-left logo-neg"><img src="/images/PW-emblem-neg.png"></div>
        <ul id="user-menu" class="pull-right">
          <li><a href="/customer-service"><img src="/images/Icon_Nav_Magnify.svg" alt="glass"></a></li>
          <li><a href="/customer-service"><img src="/images/Icon_Nav_Cart.svg" alt="cart"> </a></li>
          <li><a href="/customer-service"><img src="/images/Icon_Nav_Info.svg" alt="info"> </a></li>
          <li><a href="/customer-service"><img src="/images/Icon_Nav_Heart.svg" alt="favorits"> </a></li>
        </ul>
      </div>
    </header> 

Espero me puedan ayudar! Gracias de antemano a todos!!