当页面在jquery中向下滚动时显示div

Question

我有这个 HTML 代码

HTML

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

还有这个 CSS 代码

CSS

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

脚本：

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

问题： 当我向下滚动页面时，每个 div 都会一一显示。 当滚动条到达“#d2”时，应该显示 div“#d1”，当滚动条到达“#d3”时，应该显示 div“#d2”......当滚动条到达页面末尾时“#d5” " 应该会显示出来。

Answer 1

你可以试试这个类似的案例：

http://jsfiddle.net/j7r27/

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