Check out this snippet of HTML code I have:
HTML
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
And here's a segment of CSS code as well:
CSS
#box1, #box2, #box3, #box4, #box5 { float:left; height:500px; width:200px; display:none;}
Javascript:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#box2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#box1").css("display","block");
} else {
$("#box1").css("display","none");
}
});
});
</script>
Question: As you scroll down the page, each div is displayed one by one. When you reach "#box2," the div "#box1" should be displayed. As you continue to scroll and reach "#box3," then "#box2" should appear, continuing until all boxes are displayed when you reach the end of the page at "#box5."