Hola.
Tengo este script para un efecto de scroll:
Código:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("inicial").style.top = "0";
document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)";
} else {
document.getElementById("header").style.top = "-100%";
}
prevScrollpos = currentScrollPos;
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200 ) {
document.getElementById("header").style.backgroundColor = "rgba(1, 56, 106, 0.9)";
} else {
document.getElementById("header").setAttribute("style", "background-color: rgba(255, 0, 0, 0); transition: 1s");
}
};
Para describirlo, lo que hace es:
1. En inicio, el header es transparente por aplicar alfa "0" a "255, 0, 0"
2. Si bajas con el scroll a más de 200 píxeles, el scroll sube por aplicación de style.top = "-100%" y la transición.
3. En cualquier lugar de la página más abajo de 200px, si subes con el scroll, el header aparece en rojo por aplicación de:
Código:
document.getElementById("inicial").style.top = "0";
document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)";
Ahora, lo que querría hacer es que entre 0 y 200px el header aparezca en rojo 0.9. para luego seguir igual, es decir, que llegados a 200px desaparece hacia arriba.
El script funciona bien pero cuando bajas con el scroll y antes de llegar a 200px, el header tapa elementos de la página porque su posición es fixed, y no queda bien porque no tiene ningún fondo, lo cual hace que el logotipo y los menús tapen el título de la página y otros elementos, y no queda nada bien.
La solución es que al bajar un poco con el scroll pero sin llegar a 200px, aparezca el fondo translúcido a 0.9. Pero solo en esa franja de 0 a 200px y por manejo del scroll.
Lógicamente si se vuelve a la posición superior cero, el background debería volver a alfa 0.
He intentado hacerlo con else if y switch, pero no me sale de ninguna forma.
¿Se os ocurre cómo?
En otro caso, le tendré que colocar un límite menor al scroll para que desaparezca en seguida de mover el scroll y así evitar el problema indicado.
Gracias por cualquier respuesta.