corregir comportamiento de divs

[dieguicho]

Estimados. necesito su ayuda para corregir el comporamiento de unos divs

son 4 divs uno debajo del otro. que a medida que scrolleamos hacia abajo van sobreponiendose. y a la vez el div que esta siendo superpuesto se queda fijo en el top

esta funcionando ok (hacia abajo) pero ahora necesitaria replicar el funcionamiento cuando scrolleamos hacia arriba. osea. ir descubriendo los divs nuevamente

este fiddle tiene el codigo http://jsfiddle.net/rtSKj/

que opinan? muchas graicas!!

[ipraetoriux]

Haber mi amigo acá me funciona perfecto...lo que hice fue modiicar el javascript y css, asigne los position dinamicamente por JS

...mira como me queda http://jsfiddle.net/2V6jB/

Código Javascript:

$(document).ready(function() {
    $(window).scroll(function () {
        
        var scrollY = $(window).scrollTop();
 
                if(scrollY >= 0 && scrollY < 500){
            $('#block1').css({'position': 'fixed', 'margin-top': '0'});
                        $('#block2').css({'position': 'relative', 'margin-top': '500px'});
        }
 
        
        if(scrollY >= 500 && scrollY < 1000){
            $('#block2').css({'position': 'fixed', 'margin-top': 0});
            $('#block3').css({'position': 'relative', 'margin-top': '1000px'});
        }
        
        if(scrollY >= 1000 && scrollY < 1500){
            $('#block3').css({'position': 'fixed', 'margin-top': 0});
            $('#block4').css({'position': 'relative', 'margin-top': '1500px'});
        }
        
    });
    
});
 

Código CSS:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  background:transparent;
}
 
body {
    font-family: 'Open Sans','Lucida Grande';
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}
 
.container {
    background-color: #EEE;
}
 
.container > div {
    width:100%;
    min-height: 500px;
    color: #444;
    font-size: 28px;
    text-align: center;
    top: 0;
}
 
#block1 {
    background-color: #6ebcd0;
    z-index: 1;
}
 
#block2 {
    background-color: #55b18e;
    z-index: 2;
}
 
#block3 {
    background-color: #e65748;
    z-index: 3;
}
 
#block4 {
    background-color: #CCC;
    /*#e8e8e8*/
    z-index: 4;
}