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

css, html, jquery

Solution

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

});

Problem

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? } }); ```

Original source