Выход из итерации в цикле и обратный вход?

Question

[SerjAndreev]

Есть такой скрипт который по скролу отрисовывает svg,
Есть масив елементов назывется elem,
как при прокрутке зайти в цикл и элементу добавить класс,при следующем прокруте добавить следующему , блоку класс?
Сейчас при прокрутке запускается цикл и добовляется всем.

function scroller(){
    var path = document.querySelector('#road2'),
        pathLength = path.getTotalLength(),
        elem = document.getElementsByClassName('project-item');

    path.style.strokeDasharray = pathLength + ' ' + pathLength;
    path.style.strokeDashoffset = pathLength;
    path.getBoundingClientRect();

    window.addEventListener("scroll", function(e) {

          var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight),
              drawLength = pathLength * scrollPercentage;
 
          path.style.strokeDashoffset = pathLength - drawLength;
        
          if (scrollPercentage >= 0.99) {
              path.style.strokeDasharray = "none";
          } else {
              path.style.strokeDasharray = pathLength + ' ' + pathLength;
              for(var i = 0; i < elem.length; ++i){
                  elem[i].classList.add("main--main-bg");
              }

          }
    });
}
scroller();

Comments

[dicem]

запили в jsfiddle, посмотрим