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

Question

[LastGeneral]

Добавляет класс, но когда скролиться вверх он убирается, как это изменить. Должно просто добавлять класс когда доскроливается к объекту.

function scrollReveal() {
			var revealPoint = 150;
			var revealElement = document.querySelectorAll(".scrollReveal");
			for (var i = 0; i < revealElement.length; i++) {
				var windowHeight = window.innerHeight;
				var revealTop = revealElement[i].getBoundingClientRect().top;
				if (revealTop < windowHeight - revealPoint) {
					revealElement[i].classList.add("animated");
				} else {
					revealElement[i].classList.remove("animated");
				}
			}
		}

		window.addEventListener("scroll", scrollReveal);
		scrollReveal();

Answer 1

[Стефан]

Как я понимаю класс animated

function scrollReveal() {
      var revealPoint = 150;
      var revealElement = document.querySelectorAll(".scrollReveal");
      for (var i = 0; i < revealElement.length; i++) {
        var windowHeight = window.innerHeight;
        var revealTop = revealElement[i].getBoundingClientRect().top;
        if (revealTop < windowHeight - revealPoint) {
          revealElement[i].classList.add("animated");
        }
      }
    }

    window.addEventListener("scroll", scrollReveal);
    scrollReveal();

просто убирите блок else,
можно еще удалять eventListener, потому что как я понимю нужда в нем отпадает:

spoiler

function scrollReveal() {
      var revealPoint = 150;
      var revealElement = document.querySelectorAll(".scrollReveal");
      for (var i = 0; i < revealElement.length; i++) {
        var windowHeight = window.innerHeight;
        var revealTop = revealElement[i].getBoundingClientRect().top;
        if (revealTop < windowHeight - revealPoint) {
          revealElement[i].classList.add("animated");
          window.removeEventListener('scroll', scrollReveal)
        }
      }
    }

    window.addEventListener("scroll", scrollReveal);
    scrollReveal();