3

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

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>

0

1 ответ 1

2

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

$.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>

1
  • 1
    это как раз тот случай когда удобнее classList.toggle 10 апр 2020 в 16:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.