Foros del Web » Programando para Internet » Javascript »

Mostrar div cuando baje con scroll (en un momento determinado)

Estas en el tema de Mostrar div cuando baje con scroll (en un momento determinado) en el foro de Javascript en Foros del Web. Hola a todos. Estoy programando una web y me he encontrado con un problema, y es que tengo una barra superior Fixed. Es decir, que ...
  #1 (permalink)  
Antiguo 15/01/2013, 08:50
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Exclamación Mostrar div cuando baje con scroll (en un momento determinado)

Hola a todos. Estoy programando una web y me he encontrado con un problema, y es que tengo una barra superior Fixed. Es decir, que permanece siempre estática, pero quiero que cuando baje la página se muestre automáticamente una serie de Div's que harán de menú. Sólo cuando baje la página, cuando esté arriba necesito que desaparezca, porque ya tengo otro menú que sustituye ese.

Lo he visto en varias páginas, que cuando bajas haciendo scroll, aparece un menú arriba. Pues necesito lo mismo pero en lugar de un menú, unos iconos.

Un ejemplo de este efecto es esto: http://www.nonumber.nl
Al bajar la página cambia la propiedad de un div. Pues lo que yo busco es que una serie de divs se muestren en un momento determinado cambiando una propiedad, y se oculten al subir la página.

He preguntado esto mismo en el apartado CSS y me han dicho que se hace con JavaScript, espero que puedan ayudarme, no encuentro nada por internet

Muchísimas gracias de verdad ;)
  #2 (permalink)  
Antiguo 16/01/2013, 09:23
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Nadie sabe como podría hacerlo? Por favor, necesito saber cómo se hace. He visto el efecto en muchas páginas, pero no cómo hacerlo. En la que lo he encontrado no se como implementarlo.

Gracias por adelantado.
  #3 (permalink)  
Antiguo 16/01/2013, 09:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

lee este tema. lo mismo que al bloque se puede cambiar la propiedad position, se le puede cambiar la propiedad display
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 16/01/2013, 09:38
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 4 meses
Puntos: 220
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Buenas

Podrias hacer eso por ejemplo

Código Javascript:
Ver original
  1. // EVENTO CUANDO SE MUEVE EL SCROLL, EL MISMO APLICA TAMBIEN CUANDO SE RESIZA
  2. var change= false;
  3. $(window).scroll(function(){
  4.     window_y = $(window).scrollTop(); // VALOR QUE SE HA MOVIDO DEL SCROLL
  5.     scroll_critical = parseInt($("#PRIMER_DIV").height()); // VALOR DE TU DIV
  6.     if (window_y > scroll_critical) { // SI EL SCROLL HA SUPERADO EL ALTO DE TU DIV
  7.        // ACA MUESTRAS EL OTRO DIV Y EL OCULTAS EL DIV QUE QUIERES
  8.     } else {
  9.        // ACA HACES TODO LO CONTRARIO
  10.     }
  11. });

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 16/01/2013, 10:23
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Cita:
Iniciado por Dradi7 Ver Mensaje
Buenas

Podrias hacer eso por ejemplo

Código Javascript:
Ver original
  1. // EVENTO CUANDO SE MUEVE EL SCROLL, EL MISMO APLICA TAMBIEN CUANDO SE RESIZA
  2. var change= false;
  3. $(window).scroll(function(){
  4.     window_y = $(window).scrollTop(); // VALOR QUE SE HA MOVIDO DEL SCROLL
  5.     scroll_critical = parseInt($("#PRIMER_DIV").height()); // VALOR DE TU DIV
  6.     if (window_y > scroll_critical) { // SI EL SCROLL HA SUPERADO EL ALTO DE TU DIV
  7.        // ACA MUESTRAS EL OTRO DIV Y EL OCULTAS EL DIV QUE QUIERES
  8.     } else {
  9.        // ACA HACES TODO LO CONTRARIO
  10.     }
  11. });

Saludos
Ok, intentaré implementar ese código a ver, pero cómo puedo mostrar un DIV mediante un código JavaScript?
No se nada de JavaScript, por eso siempre intento evitarlo.

Muchas gracias
  #6 (permalink)  
Antiguo 16/01/2013, 11:22
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 4 meses
Puntos: 220
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

mmm

Entonces te recomiendo que trates de leer un poco de tutoriales de JavaScript en la web hay miles para que veas y aprendas

En cuanto a ocultar o no ocultar un div solamente puedes hacer esto

$('#ID_DIV').hide(); // OCULTAR
$('#ID_DIV').show(); // VER

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #7 (permalink)  
Antiguo 16/01/2013, 12:09
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Ok, muchas gracias. Veré varios tutoriales y eso.

En cuanto al código, en la parte que necesito que se muestre he colocado esto:

<script type="text/javascript">
// EVENTO CUANDO SE MUEVE EL SCROLL, EL MISMO APLICA TAMBIEN CUANDO SE RESIZA
var change= false;
$(window).scroll(function(){
window_y = $(window).scrollTop(); // VALOR QUE SE HA MOVIDO DEL SCROLL
scroll_critical = parseInt($("#ID_DIV").height()); // VALOR DE TU DIV
if (window_y > scroll_critical) { // SI EL SCROLL HA SUPERADO EL ALTO DE TU DIV
// ACA MUESTRAS EL OTRO DIV Y EL OCULTAS EL DIV QUE QUIERES
$('#ID_DIV').show(); // VER
} else {
// ACA HACES TODO LO CONTRARIO
$('#ID_DIV').hide(); // OCULTAR
}
});
</script>

Pero no aparece (el div está fixed)

Por qué no funciona? Gracias :)

Última edición por serg_prog; 16/01/2013 a las 12:12 Razón: He puesto mal el código
  #8 (permalink)  
Antiguo 16/01/2013, 12:25
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 16 años, 4 meses
Puntos: 220
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

WTF???

y estas seguro que tu div se llama ID_DIV lo que puse fue un ejemplo nada mas del id de un div tu debes ponerlo el nombre de tu DIV

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #9 (permalink)  
Antiguo 16/01/2013, 12:28
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Cita:
Iniciado por Dradi7 Ver Mensaje
WTF???

y estas seguro que tu div se llama ID_DIV lo que puse fue un ejemplo nada mas del id de un div tu debes ponerlo el nombre de tu DIV

Saludos
jajaja claro! Eso lo he puesto para continuar con el ejemplo. Realmente he sustituido "ID_DIV" por el ID del DIV, pero aun así no me funciona. Es lo que no comprendo.

PD: El <script> lo he puesto en el <body>, justamente donde lo necesito.
  #10 (permalink)  
Antiguo 16/01/2013, 13:01
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

La rta de Dradi7 implica usar jQuery. ¿Está incluída esa librería?
  #11 (permalink)  
Antiguo 16/01/2013, 13:05
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Cita:
Iniciado por Panino5001 Ver Mensaje
La rta de Dradi7 implica usar jQuery. ¿Está incluída esa librería?
Ahora sí, la acabo de incluir.
En <head> he incluido:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Y

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Pero no funciona aún

PD: El código css del ID que estoy usando para la prueba es:
position: fixed;
width: 100px;
height: 100px;
background: black;

Última edición por serg_prog; 16/01/2013 a las 13:19 Razón: Acabo de incluir el jQuery
  #12 (permalink)  
Antiguo 16/01/2013, 16:55
 
Fecha de Ingreso: septiembre-2011
Mensajes: 60
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

ok, ya he incluido correctamente la librería jQuery y funciona perfectamente.
Muchísimas gracias a todos.
  #13 (permalink)  
Antiguo 23/11/2013, 08:42
 
Fecha de Ingreso: noviembre-2013
Mensajes: 1
Antigüedad: 11 años
Puntos: 0
Respuesta: Mostrar div cuando baje con scroll (en un momento determinado)

Saludos. Excelente aporte. Me ayudo muchisimo. Ahora la prengunta. Como hago para que ese div que quiero que aparezca, lo haga con un efecto de transicion de fadeIn?

Etiquetas: determinado, momento, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




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