Cambiar un DIV a “posición: fijo”, luego cambiarlo de nuevo a “estático” y mostrar el rest de DIVs

Tengo varios divs, y después de algunos desplazamientos, el segundo div será “posición: fijo” y nuevamente después de algunos más desplazamientos, volverá a “posición: estática” pero el problema es

la cuarta división vendrá a continuación, NO la tercera (porque ha pasado al desplazarse mientras estamos en la segunda división).

¿Cómo puedo mostrar el tercer div después del segundo?

Aquí está el FIDDLE : http://jsfiddle.net/5vzze/2/

HTML:

1
2
3
4
5
6
7

CSS:

 #container{ position: relative; } .slide{ min-height: 400px; height: 500px; width: 100%; } 

jQuery:

 $(window).scroll(function(){ var curScrollVal = $(window).scrollTop(); if( curScrollVal > 500 && curScrollVal  1500 ){ $('#d2').css({'position': 'static', 'top': 'auto', 'background-color': 'grey'}); //How can I show div "#d3" and the rest? } }); 

No estoy completamente seguro de si entiendo lo que quieres decir, PERO esto es lo que creo que estás pidiendo.

ESTO o ESTO ?

 $(window).scroll(function(){ var curScrollVal = $(window).scrollTop(); if( curScrollVal > 500 && curScrollVal < 1500){ $('#d2').css({'position': 'fixed', 'top': 0, 'background-color': 'pink'}); $('#d3').css({'margin-top': '500px'}); } //now I wanna show the next divs in order else if( curScrollVal > 1500 ){ $('#d2').css({'position': 'static', 'top': 'auto', 'background-color': 'grey'}); //How can I show div "#d3" and the rest? } }); 

Hay 7 divs, cada div tiene 500px de altura. Significa que el tercer div comienza a 1001px mientras tu condición es

"curScrollVal > 500 && curScrollVal < 1500"

que se puede traducir a

"more than 1st div and less than 4th div"

Es decir, la segunda división aparecerá estática y rosa después de pasar la primera división hasta el comienzo de la cuarta división.

Esa es la razón por la que se saltó el tercer div.

Además, debe usar> = en lugar de> para la condición de inicio, omitirá 1 píxel de la división respectiva. El efecto solo se notará en la ventana con exactamente 500px.

Aquí está la solución adecuada jsfiddle