在滚动上显示div - Jquery

时间:2013-09-26 14:44:00

标签: jquery html css animation

我似乎无法找到以下问题的答案。

我需要能够向下滚动页面并在滚动时显示特定的div。然后div会留在那里。

我已创建了html但无法弄清楚jquery。

第一个div需要保留在那里,第二个和第三个隐藏直到滚动。

有人可以帮忙吗?

<div class="content1">content 1</div>
<div class="content2">content 2</div>
<div class="content3">content 3</div>


.content1 {
    height:300px;
    width:500px;
    border:2px solid red;
}
.content2 {
    height:300px;
    width:500px;
    border:2px solid blue;
}
.content3 {
    height:300px;
    width:500px;
    border:2px solid orange;

http://jsfiddle.net/ak9Hb/6/

谢谢你!

2 个答案:

答案 0 :(得分:1)

您可以使用.scroll事件来捕捉此

$(document).ready(function(){
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
   // now on the basis of scrollTop value show your div
     if(scrollTop > 200){
      // show div1
     }
     // and so on
    })
})

答案 1 :(得分:0)

添加Sachin的答案......

然后你可以做

$('.content1').fadeIn('slow');

请参阅以下

http://jsfiddle.net/ak9Hb/7/