Geek Answers Handbook

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

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

The 4th div will be the next NOT third (because it has been scrolled while we are on the second div).

How can I show the third div after the second?

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? } });
+6
source share
2 answers

Not quite 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? } });
+3
source

There are 7 divs, each div is 500px high. So the 3rd div starts at 1001px until your condition

"curScrollVal > 500 && curScrollVal < 1500"

which can be translated into

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

Meaning, the second div will appear static and pink after passing the 1st div to the beginning of the 4th div

It is for this reason that you skipped the third div.

In addition, you must use> = instead of> to trigger the condition; you will skip 1 pixel of the corresponding div. The effect will be noticeable only in a window with exactly 500px.

Here is the correct jsfiddle fix

0
source

More articles:


All Articles