Changing a DIV to "position:fixed" then change it back to "static" and show the rest of DIVs

Question

I have several divs, and after some scrolling the second div will be "position:fixed" and again after some more scrolling it will be back to "position:static" but the problem is:

the 4th div will come next NOT the third (because it has passed by scrolling while we are at the 2nd div).

How can I show the third div after the 2nd one?

Here is the FIDDLE: http://jsfiddle.net/5vzze/2/

HTML:

<div id="container">
    <div class="slide" id="d1">1</div>
    <div class="slide" id="d2">2</div>
    <div class="slide" id="d3">3</div>
    <div class="slide" id="d4">4</div>
    <div class="slide" id="d5">5</div>
    <div class="slide" id="d6">6</div>
    <div class="slide" id="d7">7</div>
</div>

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': 'fixed', 'top': 0, 'background-color': 'pink'});
    }
    else if( curScrollVal > 1500 ){
        $('#d2').css({'position': 'static', 'top': 'auto', 'background-color': 'grey'});

        //How can I show div "#d3" and the rest?
    }

});

Answer 1

Not entirely sure if I understand what you mean BUT this is what I think you are asking for.

THIS or THIS?

$(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?
}

});