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

[serg_prog]

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 ;)

[serg_prog]

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.

[IsaBelM]

lee este tema. lo mismo que al bloque se puede cambiar la propiedad position, se le puede cambiar la propiedad display

[Dradi7]

Buenas

Podrias hacer eso por ejemplo

Código 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($("#PRIMER_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
    } else {
       // ACA HACES TODO LO CONTRARIO
    }
});
 

Saludos

[serg_prog]

Iniciado por Dradi7

Buenas

Podrias hacer eso por ejemplo

Código 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($("#PRIMER_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
    } else {
       // ACA HACES TODO LO CONTRARIO
    }
});
 

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

[Dradi7]

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

[serg_prog]

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 :)

[Dradi7]

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

[serg_prog]

Iniciado por Dradi7

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.

[Panino5001]

La rta de Dradi7 implica usar jQuery. ¿Está incluída esa librería?

[serg_prog]

Iniciado por Panino5001

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;

[serg_prog]

ok, ya he incluido correctamente la librería jQuery y funciona perfectamente.
Muchísimas gracias a todos.

[marcelpm1987]

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?