if else o swich para añadir efecto

[prueba230683]

Viendo el ejemplo que muestra ArturoGallegos me doy cuenta de que mi versión no funciona cuando se sube al top sin usar scroll (ej. con un enlace href="#"), o en el caso límite que pasa de distancia 201 a distancia 200.

Lo paso corregido, pero el mérito es para ArturoGallegos

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
 
    }
 
    if (currentScrollPos > 200 && prevScrollpos < currentScrollPos) {
        document.getElementById("header").style.top = "-100%"; // esconder header
    } else {
        document.getElementById("header").style.top = "0"; // mostrar header
    }
 
    prevScrollpos = currentScrollPos; // actualizar posicion previa
};
 

DEMO: https://www.w3schools.com/code/tryit...e=G9TBMG9O0GZC