Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de if else o swich para añadir efecto en el foro de Javascript en Foros del Web. Hola. Tengo este script para un efecto de scroll: Código: var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > ...
  #1 (permalink)  
Antiguo 09/11/2019, 06:49
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
if else o swich para añadir efecto

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.
  #2 (permalink)  
Antiguo 09/11/2019, 15:32
 
Fecha de Ingreso: abril-2011
Mensajes: 42
Antigüedad: 8 años, 7 meses
Puntos: 10
Respuesta: if else o swich para añadir efecto

Prueba con if, else if:

Código Javascript:
Ver original
  1. var prevScrollpos = window.pageYOffset;
  2. window.onscroll = function() {
  3.   var currentScrollPos = window.pageYOffset;
  4.  
  5.   if(currentScrollPos == 0){  // si la distancia es cero
  6.        document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0)"; // poner totalmente transparente
  7.   }else if(currentScrollPos < 200){ // si la distancia esta entre 0 y 200
  8.        document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner alpha a 0.9 en color rojo
  9.   }else{ // si la distancia es mayor que 200
  10.        if(prevScrollpos < currentScrollPos){ // si estamos bajando con el scroll
  11.             document.getElementById("header").style.backgroundColor = "rgba(1, 56, 106, 0.9)"; // poner alpha a 0.9 en color azul
  12.        }else{ // si estamos subiendo con el scroll
  13.             document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner alpha a 0.9 en color rojo
  14.        }
  15.   }
  16.   prevScrollpos = currentScrollPos; // actualizar posicion previa
  17. };

Y la transición la estableces desde CSS:

Código CSS:
Ver original
  1. #header {
  2.   background-color: rgba(255, 0, 0, 0);
  3.   transition: background-color 1s;
  4.   top: 0;
  5.   position: fixed;
  6.   width: 100%;
  7. }


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

Última edición por prueba230683; 09/11/2019 a las 16:50
  #3 (permalink)  
Antiguo 09/11/2019, 17:43
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: if else o swich para añadir efecto

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.
  #4 (permalink)  
Antiguo 09/11/2019, 19:39
 
Fecha de Ingreso: abril-2011
Mensajes: 42
Antigüedad: 8 años, 7 meses
Puntos: 10
Respuesta: if else o swich para añadir efecto

Bien, pues a ver así:

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

Código CSS:
Ver original
  1. #header{
  2.  background-color:transparent;
  3.  position:fixed;
  4.  top: 0;
  5.  width: 100%;
  6.  transition: top 0.3s;
  7. }

Código Javascript:
Ver original
  1. var prevScrollpos = window.pageYOffset;
  2. window.onscroll = function() {
  3.   var currentScrollPos = window.pageYOffset;
  4.  
  5.   if(currentScrollPos == 0){  // si la distancia es cero
  6.        document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0)"; // poner totalmente transparente
  7.   }else if(currentScrollPos < 200){ // si la distancia esta entre 0 y 200
  8.        document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner en rojo
  9.   }else{ // si la distancia es mayor que 200
  10.      if(prevScrollpos < currentScrollPos){ // si estamos bajando con el scroll
  11.         document.getElementById("header").style.top = "-100%";// esconder header
  12.      }else{ // si estamos subiendo con el scroll
  13.         document.getElementById("header").style.top = "0"; // mostrar header
  14.      }
  15.   }
  16.   prevScrollpos = currentScrollPos; // actualizar posicion previa
  17. };

Última edición por prueba230683; 09/11/2019 a las 19:50
  #5 (permalink)  
Antiguo 09/11/2019, 20:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: if else o swich para añadir efecto

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/
  #6 (permalink)  
Antiguo 10/11/2019, 08:39
 
Fecha de Ingreso: abril-2011
Mensajes: 42
Antigüedad: 8 años, 7 meses
Puntos: 10
Respuesta: if else o swich para añadir efecto

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:
Ver original
  1. var prevScrollpos = window.pageYOffset;
  2. window.onscroll = function() {
  3.     var currentScrollPos = window.pageYOffset;
  4.  
  5.     if (currentScrollPos == 0) { // si la distancia es cero
  6.         document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0)"; // poner totalmente transparente
  7.     } else if (currentScrollPos < 200) { // si la distancia esta entre 0 y 200
  8.         document.getElementById("header").style.backgroundColor = "rgba(255, 0, 0, 0.9)"; // poner en rojo
  9.  
  10.     }
  11.  
  12.     if (currentScrollPos > 200 && prevScrollpos < currentScrollPos) {
  13.         document.getElementById("header").style.top = "-100%"; // esconder header
  14.     } else {
  15.         document.getElementById("header").style.top = "0"; // mostrar header
  16.     }
  17.  
  18.     prevScrollpos = currentScrollPos; // actualizar posicion previa
  19. };


DEMO: https://www.w3schools.com/code/tryit...e=G9TBMG9O0GZC
  #7 (permalink)  
Antiguo Ayer, 05:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: if else o swich para añadir efecto

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í?

Última edición por JUMASOL; Ayer a las 05:14
  #8 (permalink)  
Antiguo Ayer, 06:47
 
Fecha de Ingreso: abril-2011
Mensajes: 42
Antigüedad: 8 años, 7 meses
Puntos: 10
Respuesta: if else o swich para añadir efecto

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:
Ver original
  1. let position = 0;
  2. window.addEventListener('scroll', function(){
  3.   console.log(this.pageYOffset);
  4.   if(this.pageYOffset < 1){
  5.     document.getElementById('main-menu').classList.remove('bg');
  6.   }else{
  7.     document.getElementById('main-menu').classList.add('bg');
  8.   }
  9.   if(this.pageYOffset > 200 && this.pageYOffset > position){
  10.     document.getElementById('main-menu').classList.add('hide');
  11.   }else{
  12.     document.getElementById('main-menu').classList.remove('hide');
  13.   }
  14.   position = this.pageYOffset;
  15. })
  #9 (permalink)  
Antiguo Ayer, 09:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: if else o swich para añadir efecto

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.
  #10 (permalink)  
Antiguo Hoy, 04:02
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: if else o swich para añadir efecto

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.



La zona horaria es GMT -6. Ahora son las 15:18.