jQuery - scrollTop() 方法实例

滚动条偏移情况来显示div内容。

下面的栗子是：当滚动条距顶部300内显示tree01内容，距顶部600显示tree02内容，距顶部900显示tree03内容。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
    $(document).scroll(function(){
        var top = $(document).scrollTop();
        if(top < 300)
            $(".tree01").show();
        else if(top < 600)
            $(".tree02").show();
        else if(top < 900)
            $(".tree03").show();
    });
});
</script>
<div style="height:300px;"></div>
<div class="tree01" style="width:300px;height:300px;background-color:red;display:none;"></div>
<div class="tree02" style="width:300px;height:300px;background-color:blue;display:none;"></div>
<div class="tree03" style="width:300px;height:300px;background-color:green;display:none;"></div>
<div style="height:3000px;"></div>