Как добавить класс элементу при появлении в зоне видимости браузера?

никак не могу найти способ, который решил бы мою задачу. В общем, вот фото:

Мне нужно, чтобы при появлении элемента класс менялся на тот, который обведён. Я попробовал один скрипт, но он не работает. Помогите, пожалуйста. Вот js

function come(elem) {
  var docViewTop = $(window).scrollTop(),
    docViewBottom = docViewTop + $(window).height(),
    elemTop = $(elem).offset().top,
    elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

const l = document.getElementById("l1")

if (come(l1)) {
    l.classList.add("left")
}