Добавить/удалить класс к картинке при скролле

Question

У меня есть блок с картинками, он находится в контентной части сайта и когда мы докручиваем до него, то к картинкам добавляется класс, и они переворачиваются. Все работает как надо. Но мне нужно чтобы когда мы прошли этот блок, класс удалился, и чтобы он добавлялся каждый раз когда мы будем возвращаться к этому блоку, а то он добавляется только один раз и все. Добавление класса при достижении определенной высоты не предлагать, так как высота может быть разная в зависимости от объема контента. Код приложил ниже:

var a = 0;
$(window).scroll(function() {

  var oTop = $('.exp-wrapper__img').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('img').each(function() {
$('img').addClass('exp-animate');
    });
    a = 1;
  }


});

.content{
  float: left;
  height: 500px;
  width: 100%;
}
.exp-wrapper__img{
  float: left;
  width: 100%;
  transform: rotate(0deg);
  transition: 2s;
}
.exp-wrapper__img img{
  width: 100px;
}
.exp-animate{
  transform: rotate(180deg);
  transition: 2s;
}

<div class="container">
<div class="content"></div>
  <div class="exp-wrapper__img">
    <img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png"><img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png">
    <img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png">
  </div>
  <div class="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вот есть хорошее рабочее решение:

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
  if ($('.exp-wrapper__img').isInViewport()) {
    $('img').addClass('exp-animate');
  } else {
    $('img').removeClass('exp-animate');
  }
});

.content {
  float: left;
  height: 500px;
  width: 100%;
}

.exp-wrapper__img {
  float: left;
  width: 100%;
  transform: rotate(0deg);
  transition: 2s;
}

.exp-wrapper__img img {
  width: 100px;
}

.exp-animate {
  transform: rotate(180deg);
  transition: 2s;
}

<div class="container">
  <div class="content"></div>
  <div class="exp-wrapper__img">
    <img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png"><img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png">
    <img src="https://s1.iconbird.com/ico/2014/1/567/w512h5121389807811officeaddressbookicon.png">
  </div>
  <div class="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Добавить/удалить класс к картинке при скролле

Ответы (1 шт):