I have this HTML code

HTML

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>

and this CSS code

CSS

#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}

Script:

<script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
                    $("#d1").css("display","block");
                }else {
                    $("#d1").css("display","none");
                }
            });
        });
    </script>

Question: When I scroll page down each div display one by one. When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.

I have this HTML code

HTML

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>

and this CSS code

CSS

#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}

Script:

<script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
                    $("#d1").css("display","block");
                }else {
                    $("#d1").css("display","none");
                }
            });
        });
    </script>

Question: When I scroll page down each div display one by one. When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.

• javascript
• jquery
• html
• css
• scroll

• Please post the code you have attempted to write yourself to solve this problem. Also, if a div is offscreen, why does it need to be hidden/displayed? – Rory McCrossan Commented May 7, 2014 at 10:49
• 1 There are many plugins and snippet available for that, google it – A. Wolff Commented May 7, 2014 at 10:52
• you could try a jquery plug in imakewebthings./jquery-waypoints – Adween Commented May 7, 2014 at 11:08

1 Answer 1

You may try this similar case:

http://jsfiddle/j7r27/

$(window).scroll(function() {
$("div").each( function() {
    if( $(window).scrollTop() > $(this).offset().top - 100 ) {
        $(this).css('opacity',1);
    } else {
        $(this).css('opacity',0);
    }
}); 
});