[SOLUCIONADO] if else o swich para añadir efecto

[JUMASOL]

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.

[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

[JUMASOL]

Gracias por el aporte prueba230683, pero creo que no has entendido el problema.

El header debe desaparecer y aparecer según bajes o subas con el scroll.

El origen lo tienes aquí:

https://www.w3schools.com/howto/tryi...ar_hide_scroll

Lo que busco es que en los 200px antes de que el header desaparezca hacia arriba, se coloree en rojo, porque en mi caso, en origen está en transparente.

El desarrollo que haces tú siempre muestra el header, que no desaparece sino que solo se le añade un background.

Un saludo.

[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
};
 

[ArturoGallegos]

Aplicar estilos con javascript es mala practica por ser mas difíciles de controlar

Prueba este ejemplo que me acabo de armar, quizás es lo que buscas
https://jsfiddle.net/arturogallegos/4whp85kg/2/

[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

[JUMASOL]

Aunque la solución de prueba230683 funciona finalmente, me quedo con la de ArturoGallegos porque, aunque no sea yo quién para decirlo, creo que tienes razón con tu indicación sobre separar css de js, que no son lo mismo ni debieran ir juntos en lo posible.

Solo una cosa, por alguna razón la segunda condición no funciona en Internet Explorer (11 en mi caso). Se añade la clase "bg" y se queda así, no se añade "hide" ni se elimina "bg".

Si sirve de orientación, la consola muestra un listado de "undefined" donde debiera de haber las posiciones del scroll.

¿Tiene arreglo o lo dejamos así?

[prueba230683]

https://developer.mozilla.org/en-US/..._compatibility

window.scrollY no funciona en IE <= 11, mientras que window.pageYOffset funciona en todos los navegadores. Simplemente reemplaza uno por otro en el código del querido ArturoGallegos:

Código Javascript:

let position = 0;
window.addEventListener('scroll', function(){
  console.log(this.pageYOffset);
  if(this.pageYOffset < 1){
    document.getElementById('main-menu').classList.remove('bg');
  }else{
    document.getElementById('main-menu').classList.add('bg');
  }
  if(this.pageYOffset > 200 && this.pageYOffset > position){
    document.getElementById('main-menu').classList.add('hide');
  }else{
    document.getElementById('main-menu').classList.remove('hide');
  }
  position = this.pageYOffset;
})
 

[ArturoGallegos]

a decir verdad pageYOffset es un alias de scrollY, aunque parece tener mejor compatibilidad....

Para IE 9 e inferiores hay que hacer uso de mas talacha para lograr el efecto
https://developer.mozilla.org/es/doc...Window/scrollX

Véase el apartado de notas, por la mención del undefine creo que el caso aplica mas a esto.

[JUMASOL]

Este último toque sí funciona para IE11, para los que vengan y les pueda interesar.

Lo que dices sobre IE9 e inferiores no me interesa porque creo que todo tiene que tener un límite. Para usos de mercado que tengan menos del 1 o 2% de usuarios no creo que sea necesario en casos como el de este efecto y para una web que no es precisamente la de Amazon donde cualquier porcentaje se traduce en cientos de miles de usuarios.

Porque si aplicas el (digamos) 2% que pueden estar usando IE9 a una cifra modesta de usuarios, no me vale la pena tantas vueltas e investigaciones para ofrecer un efecto visual no esencial a (digamos) 10 personas al mes.

Y dentro de unos meses o un par de años, quizás a ninguno.

Es lo que pienso.

Gracias ArturoGallegos y prueba230683. Sois magníficos. No tengo tiempo ahora pero me gustaría meterme en el tema de Js y llegar algún día a saber la mitad que vosotros. Que ya sería bastante.

[JUMASOL]

No lo había revisado en todos los navegadores, pero en Safari no funciona el script. Me sale este mensaje en la consola:

SyntaxError: Unexpected identifier 'position'

El script era este:

Código:

let position = 0;
window.addEventListener('scroll', function(){
  console.log(this.pageYOffset);
  if(this.pageYOffset < 1){
    document.getElementById('main-menu').classList.remove('bg');
  }else{
    document.getElementById('main-menu').classList.add('bg');
  }
  if(this.pageYOffset > 200 && this.pageYOffset > position){
    document.getElementById('main-menu').classList.add('hide');
  }else{
    document.getElementById('main-menu').classList.remove('hide');
  }
  position = this.pageYOffset;
})

[ArturoGallegos]

cambia

Código Javascript:

let position = 0;
 

por

Código Javascript:

var position = 0;
 

La verdad no he revisado el nivel de compatibilidad con los navegadores, el uso de let esta en ES6

viejos navegadores no tienen soporte como en el caso de IE, yo utilizo TypeScript por lo que no me he visto en la necesidad de revisarlo en safari para ver si funciona o no.

[JUMASOL]

Sí, ya hice esa sustitución antes de revisar tu post, y funciona.

El problema era solo con Safari.

Un saludo y gracias.

[JUMASOL]

Aunque esta solución parecía funcionar en todos los navegadores, ahora veo que en IE11 parece haber un problema con la última parte

Código:

if(this.pageYOffset > 200 && this.pageYOffset > position){
    document.getElementById('main-menu').classList.add('hide');
  }else{
    document.getElementById('main-menu').classList.remove('hide');
  }

Al bajar en la página, en cualquier altura, primero se añade la clase "hide" y luego se elimina, si subir con el scroll, es decir, la clase "hide" siempre resulta eliminada con lo que el bloque de navegación siempre se muestra.

Y la consola no muestra ningún problema.

Y es entonces cuando me doy cuenta de que el efecto funciona manejando el scroll con el pointer, porque si utilizo la rueda del ratón se produce el fallo.

¿Sabéis si es un bug de IE11 y si tiene solución?

Gracias.