Superponer dos divs al hacer scroll

madman_18 · #1 (**permalink**) 14/02/2016, 10:32

Hola a todos!

Tengo una duda a la hora de construir una estructura que necesito... Necesitaría que en la página, al hacer scroll el contenido del bloque superior se fuese ocultando con el contenido del bloque inferior pero no logro hacerlo jugando con los position y demás.

La estructura que tengo es esta (esto es de un fichero ejemplo que me he hecho de prueba para ir probándolo hasta dar con la tecla):

Código HTML:

Ver original<body>
<div class="contiene-all">
            <div class="bloque-superior">
                este es mi bloque superior
            </div>
            <div class="bloque-inferior">
                este es mi bloque inferior
            </div>
        </div>
</body>

Código CSS:

Ver originalbody,html{width:100%;height:100%;}
        .contiene-all{
            width:100%;
            height:auto;
            min-height: 100%;
            position:relative;
        }
        .bloque-superior{
            width:100%;
            height:auto;
min-height:900px;
            position:absolute;
            background: blue;
            z-index: 99;
            top:0;
        }
        .bloque-inferior{
            width:100%;
            min-height:2000px;
            background:green;
            position: relative;
            z-index: 9999;          
        }

Y necesitaría que el de bloque-inferior al hacer scroll fuese ocultando el de bloque-superior.

Ah! Ninguno de los bloques tienen un height fijo sino que varía por si os orienta algo también....

Si pudieseis echarme una mano os lo agradezco porque me tiene ya.....

Gracias!

IsaBelM · #2 (**permalink**) 14/02/2016, 13:13

Busca información sobre el efecto parallax scrolling

madman_18 · #3 (**permalink**) 16/02/2016, 08:47

Cita:

Iniciado por IsaBelM

Busca información sobre el efecto parallax scrolling

Perdón por tardar en contestar...

He estado mirando cosas sobre parallax pero me asalta una duda....El bloque superior que tengo (bueno en realidad los dos) su height es dinámico ya que el superior tendría un slider responsive y el de abajo me carga un número que se defina de elementos...........No lo tengo de forma fija ni nada por lo que no sé cómo tendría que plantear los efectos parallax.

¿Tendría que sacar el height del elemento cuando me haya cargado la página?