if else o swich para añadir efecto

[prueba230683]

Prueba con if, else if:

Código Javascript:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
 
  if(currentScrollPos == 0){  // si la distancia es cero
       document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0)"; // poner totalmente transparente
  }else if(currentScrollPos < 200){ // si la distancia esta entre 0 y 200
       document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner alpha a 0.9 en color rojo
  }else{ // si la distancia es mayor que 200
       if(prevScrollpos < currentScrollPos){ // si estamos bajando con el scroll
            document.getElementById("header").style.backgroundColor = "rgba(1, 56, 106, 0.9)"; // poner alpha a 0.9 en color azul
       }else{ // si estamos subiendo con el scroll
            document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner alpha a 0.9 en color rojo
       }
  }
  prevScrollpos = currentScrollPos; // actualizar posicion previa
};
 

Y la transición la estableces desde CSS:

Código CSS:

#header {
  background-color: rgba(255, 0, 0, 0);
  transition: background-color 1s;
  top: 0;
  position: fixed;
  width: 100%;
}
 

DEMO: https://www.w3schools.com/code/tryit.asp?filename=G9SK9LF1BTI8