滚动到视图时将类添加到元素

时间：2016-12-08 04:51:12

标签： javascript jquery css

我想在滚动到视图时尝试向我的元素添加类。到目前为止，我已经完成了This Fiddle。它不起作用。

我已经完成了向上滚动。我想要它也可以向上滚动

scrollOffset = 200;

$(window).scroll(function() {
  $('.wpb_animate_when_almost_visible').each(function() {
    if ($(window).scrollTop() + $(window).height() - scrollOffset > $(this).position().top) {
      if ($(this).hasClass('wpb_start_animation')){
            $(this).toggleClass('wpb_start_animation');
      }
    }
  });
});

这是正确的方法吗？或者我做错了什么？

修改

检查我的新小提琴

https://jsfiddle.net/gd4yj5pu/2/

2 个答案:

答案 0 :(得分：2)

在css中添加transition: all 2s ease 0s;并在jquery中使用条件if ($(window).scrollTop()+$(window).height() >= $(this).position().top && $(window).scrollTop() < $(this).position().top + $(this).height())来切换该类。

<强>样本： - 

scrollOffset = 200;

$(window).scroll(function() {
  $('.wpb_animate_when_almost_visible').each(function() {
      //console.log(this+$(this).position().top);
    if ($(window).scrollTop()+$(window).height() >= $(this).position().top && $(window).scrollTop() < $(this).position().top + $(this).height()) {
      //console.log(this+$(this).position().top);
      //if ($(this).hasClass('wpb_start_animation')){
      if (!$(this).hasClass('wpb_start_animation')){
      $(this).addClass('wpb_start_animation');
      }
    }
    else if ($(this).hasClass('wpb_start_animation')) {
      //console.log(this+$(this).position().top);
      //if ($(this).hasClass('wpb_start_animation')){
      $(this).removeClass('wpb_start_animation');
      //}
    }
  });
});
.wpb_animate_when_almost_visible {
  height: 200px;
  width: 200px;
  background-color: red;
     -webkit-transition: all 2s ease 0s;
     -moz-transition: all 2s ease 0s;
     -o-transition: all 2s ease 0s;
     -ms-transition: all 2s ease 0s;*/
     transition: all 2s ease 0s;
}
.wpb_start_animation {
  height: 200px;
  width: 900px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <div class="wpb_animate_when_almost_visible" data-scroll-to="100"></div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <div class="wpb_animate_when_almost_visible" data-scroll-to="200"></div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</body>

更新

  

当你体内有一个可滚动的div时，你必须听   到$('.staticscroller')滚动到它的动画   滚动时可见。使用以下演示

<强>样本： - 

scrollOffset = 200;

$('.staticscroller').scroll(function() {
  $('.wpb_animate_when_almost_visible').each(function() {
    //console.log(this+$(this).position().top);
    //var myPosit=$(this).offset().top - $(".staticscroller").offset().top;
    var myPosit = $(".staticscroller").scrollTop() + $(this).position().top - $(".staticscroller").height() / 2 + $(this).height() / 2;
    if ($('.staticscroller').scrollTop() + $('.staticscroller').height() >= myPosit && $('.staticscroller').scrollTop() < myPosit + $(this).height()) {
      //console.log(this+$(this).position().top);
      //if ($(this).hasClass('wpb_start_animation')){
      if (!$(this).hasClass('wpb_start_animation')) {
        $(this).addClass('wpb_start_animation');
      }
    } else if ($(this).hasClass('wpb_start_animation')) {
      //console.log(this+$(this).position().top);
      //if ($(this).hasClass('wpb_start_animation')){
      $(this).removeClass('wpb_start_animation');
      //}
    }
  });
});
body {
  margin: 0;
}
div.staticscroller {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
}
.wpb_animate_when_almost_visible {
  height: 200px;
  width: 200px;
  background-color: red;
  -webkit-transition: all 2s ease 0s;
  -moz-transition: all 2s ease 0s;
  -o-transition: all 2s ease 0s;
  -ms-transition: all 2s ease 0s;
  */ transition: all 2s ease 0s;
}
.wpb_start_animation {
  height: 200px;
  width: 900px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="staticscroller">
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
    
    <div>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <div class="wpb_animate_when_almost_visible" data-scroll-to="100"></div>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <div class="wpb_animate_when_almost_visible" data-scroll-to="200"></div>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
    </div>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
      <p>a</p>
  </div>
</body>

答案 1 :(得分：0)

希望它会有用。

<!DOCTYPE html>
<html>
<head>
  <style>
   .wpb_animate_when_almost_visible {
     height:200px;
     width:200px;
     background-color:red;
   }
  .wpb_start_animation{
    height:200px;
    width:900px;
    background-color:blue;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script>
 $(document).ready(function() {
   var scrollOffset = 200;
   $(window).scroll(function() {
    $('.wpb_animate_when_almost_visible').each(function() {
      if ($(window).scrollTop() + $(window).height() - scrollOffset > $(this).position().top) {
        if ($(this).hasClass('wpb_start_animation')){
          $(this).removeClass('wpb_start_animation');
        }
        else {
          $(this).addClass('wpb_start_animation');
        }
      }
    });
 });
  });
  </script>
</head>
<body>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <div class="wpb_animate_when_almost_visible" data-scroll-to="100"></div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <div class="wpb_animate_when_almost_visible" data-scroll-to="200"></div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</body>
</html>

相关问题
最新问题