Цикл для добавления привязки к элементу на основе положения другого элемента при прокрутке

#javascript

Вопрос:

Я пытаюсь заставить класс отображаться в элементе на основе положения другого элемента. Итак, по сути, когда появляется первый элемент, он имеет атрибут data-anchor=»позиция», а элемент, на который он должен воздействовать, имеет атрибут data-anchor=»item» . Когда data-anchor=»position» входит в окно просмотра, предполагается, что он добавляет класс, а когда он уходит, он должен удалить класс. Часть position / item находит первую, а затем просто включает и выключает имя класса. Есть еще одна часть скрипта, которая ищет атрибут data-animate и добавляет класс, когда этот элемент появляется в поле зрения. Эта часть работает нормально, но я включил ее на случай возникновения конфликта. Я настраиваю скрипку, чтобы показать это. Любые рекомендации приветствуются.

 
// Loop to add class on items with data-position attribute
var anchor = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};
var anchorToShow = document.querySelectorAll('[data-anchor="position"]'); 

function anchorloop() {

  anchorToShow.forEach(function (anchorPos) {
    if (isElementInViewport(anchorPos)) {
      document.querySelector('[data-anchor="item"]').classList.add('fixed-object');
    } else {
      document.querySelector('[data-anchor="item"]').classList.remove('fixed-object');
    }
  });

  anchor(anchorloop);
}


anchorloop();
 

https://jsfiddle.net/Jon43167/5znmpk90/3/