向下滚动屏幕后显示元素

时间:2018-02-18 17:51:30

标签: jquery scroll offset

我有这段代码,每当第一个元素出现在屏幕上时,它会显示所有具有相同类的元素。 我真正想做的是在屏幕上出现时单独显示每个元素,而不是同时显示所有元素。我希望我能够清楚地解释清楚。

这是html:

  <div class="scrollfx">ELEMENT</div>    
  <div class="scrollfx">ELEMENT</div>

的CSS:

body {
  height:1600px;
}

.scrollfx {

  width: 100%;
  height: 150px;
  background:blue;
  position: relative;
  top: 50px;
  font-size:4em;
  margin-top:500px;    
  filter: opacity(0);
}
.scrollfx.fadein {
  filter:opacity(1);
  transition: all 2.5s ease;
}

jquery的:

$(document).scroll(function () {

  var el = $('.scrollfx');
  var bottom = el.offset().top + el.outerHeight(true);
  var y = $(this).scrollTop();

  $('.scrollfx').each(function () {
    if (y = bottom) {
      $(this).addClass('fadein'); 
    }           
  });

});

Jsfiddle here

0 个答案:

没有答案
相关问题