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