jQuery - scrollTop() 方法实例

目录

滚动条偏移情况来显示div内容。
下面的栗子是:当滚动条距顶部300内显示tree01内容,距顶部600显示tree02内容,距顶部900显示tree03内容。

!!!javascript
<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>

文章最后编辑时间为:2015-11-09 17:42:48

标签: jquery

声明:本博客如无特殊说明皆为原创,转载请注明来源:jQuery - scrollTop() 方法实例谢谢!

相关文章

精彩评论
  1. Flick Flick  Windows 8.1 x64 Edition Google Chrome 45.0.2454.101

    jquery判断滚动条与头部距离。

  2. 冷乐博客 冷乐博客  Windows 8.1 x64 Edition Firefox 38.0

    学习一下

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png