[seven8959]

Всем привет. Подскажите пожалуйста, как сделать появление элементов
при скролле. Элементов много, у всех один и тот же класс, и каждому нужно добавить другой класс. Все это должно работать, когда элемент в поле видимости. У меня сейчас работает не так. Когда первый элемент появился в зоне видимости, то классы добавились ко всем остальным элементам.

function scrollTracking(){
     
  var element = $('.scroll-js');

  var wt = $(window).scrollTop();
  var wh = $(window).height();
  var et = element.offset().top;
  var eh = element.outerHeight();
  var dh = $(document).height();
  var ww = $(window).width();   

  if ((wt + wh >= et || wh + wt == dh || eh + et < wh) && ww > 1024){ 
    
    for( var i = 0; i < element.length; i++) {
      element.addClass('scroll-js--active')
    } 
  }
}

$(window).scroll(function(){
  scrollTracking();
});

//- 1 блок

.container.block.wrapper 
        .bg.scroll-js 
            svg
         img(alt="image" src="img/img.jpg" loading="lazy")

//- 2 блок

ul.info__list.effect.scroll-js
            li.info__items.items 
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 
            li.info__items.items
                .items__heading 
                .items__text 

//-3 блок такой же как первый

// 1 блок 

.bg {
        position: absolute;
        left: -100%;
        bottom: 0;
        display: block;
        transition: all .8s ease-out; 
        
        svg {
            width: 350px;
            height: 200px;
        }
    } 
    
    .scroll-js--active {
        left: 0;
    }


// 2 блок 

.info__items {
        opacity:0;

        &:nth-child(2) {
            transition-delay: .8s;
        }

        &:nth-child(3) {
            transition-delay: 1.6s;
        }

        &:nth-child(4) {
            transition-delay: 2.4s;    
        }
    }

    .scroll-js--active .info__items{
        opacity: 1;
    }