Pequeña ayuda con Javascript para ocultar un elemento en scroll

Archivado
Hola a todos.

Veréis, me gustaría usar Javascript para ocultar un pequeño botón que tengo colocado en la parte superior del todo de mi página web (para cambiar a idioma inglés) cuando el usuario hace scroll hacia abajo y que sólo volviera a aparecer cuando vuelve a llegar a la parte superior de la web.

Lo único que he encontrado en internet es código para ocultarlo al bajarlo y mostrarlo nada más se comienza a subir. Yo sólo quiero volver a mostrarlo si ha llegado arriba del todo.

Lo ideal, en realidad, sería que una vez se carga la web de primeras, y sin mover nada, se viera durante 3-5 segundos y desapareciera, o también que desaparezca si se hace scroll down. Y vuelva a aparecer sólo cuando se llega haciendo scroll up a la parte de arriba del todo y vuelva a mostrarse durante 3-5 segundos hasta desaparecer y se repita el ciclo. Aunque esto no sé si es muy complicado.

Agradecería cualquier ayuda.

Muchas gracias.

Saludos
.
Podrías explicar un poco tu código Azsche?

Gracias por la ayuda
@David13_13

Si no me equivoco, se ejecuta la función cada vez que se hace scroll, y el if de dentro es "true" cuando la distancia desde la posición actual al margen superior de la página es igual o menor a 30px.

En ese código, se mostraría el alert si se hace scroll en alguna posición donde la posición actual al margen superior es menor o igual a 30px.
Estoy usando el código adaptado para ocultar mi elemento particular, pero no funciona...

$(window).scroll(function() {
   if($(window).scrollTop()) <= 30 ) {
       $('#WPML').hide();
   }
});


Vale, parece que sobraba un paréntesis en la segunda línea:

$(window).scroll(function() {
   if($(window).scrollTop() <= 30 ) {
       $('#WPML').hide();
   }
});


Ahora funciona, esconde el elemento pero al volver arriba del todo no lo vuelve a mostrar...

Saludos
.
Muchas gracias por la detallada respuesta.

He probado el nuevo código pero sigue sin volver a mostrar el elemento cuando llego arriba del todo...

Saludos
.
Ahora no ocurre nada, el elemento aparece visible en todo momento xD

Muchas gracias por tu ayuda
Azsche escribió:Ouch perdona que no me suelo pasar por el subforo. Te puse la base para que empezaras, no el código justo para tu caso particular, pero la idea es:

$(window).scroll(function() { //Lo de dentro de los brackets se llama siempre que el usuario hace scroll.
   if($(window).scrollTop() <= 30 ) { //Ésto se ejecuta siempre que se haga scroll (por el evento superior y además la distancia hasta arriba sea mayor a 30 pixeles
       $('#WPML').hide();
       return; //Para que no siga ejecutando una vez que ha escondido el elemento
   }else if($(window).scrollTop() == 0 ) { //Ésto se ejecuta siempre que se haga scroll (por el evento superior y además la distancia hasta arriba sea igual a 0 pixeles o arriba del todo
       $('#WPML').show();
       //Aquí deberías poner un set time out para que vuelva a ocultar el elemento después de unos segundos si es lo que quieres
       return; //Para que no siga ejecutando una vez que ha vuelto a mostrar el elemento
   }
});


Edit: Los paréntesis, es lo que tiene escribir codigo de cabeza sin probarlo x_DD


Tal vez tropiece a estas horas, pero si la condición es menor/igual a 30 nunca va pasar al else if del == 0, lo suyo seria comprobar primero si es igual a 0, al revés.

Edito: Vale, lo has corregido más abajo y veo que es mayor en lugar de menor.
9 respuestas
Archivado
Volver a General