if else o swich para añadir efecto

[prueba230683]

Bien, pues a ver así:

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

Código CSS:

#header{
 background-color:transparent;
 position:fixed;
 top: 0;
 width: 100%;
 transition: top 0.3s;
}
 

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 en rojo
  }else{ // si la distancia es mayor que 200
     if(prevScrollpos < currentScrollPos){ // si estamos bajando con el scroll
        document.getElementById("header").style.top = "-100%";// esconder header
     }else{ // si estamos subiendo con el scroll
        document.getElementById("header").style.top = "0"; // mostrar header
     }
  }
  prevScrollpos = currentScrollPos; // actualizar posicion previa
};