Затухание фонового изображения элемента по классам (vanilla JS)

Question

Я бы хотел убрать фоновое изображение элемента, идентифицированного по имени класса, при прокрутке, как только следующий элемент (опять же по классу) окажется в области просмотра. Используется vanilla JS (не JQuery).

Мой код:

var heroScroll = document.querySelector(".hero").offsetTop;
window.onscroll = function() {
  if (window.pageYOffset > 0) {
    var opac = window.pageYOffset / heroScroll;
    document.getElementByClassName("now").style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), 
        rgba(255, 255, 255, " + opac + ")), 
        url(myImage.jpg) no-repeat";
    }
}

Answer 1

Попробуйте это:

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.2;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);

#target {
    height: 100px;
    background-color: blue;
}

<div id="target">Click to fade</div>

Дайте мне знать, сработало ли это для вас или вам нужна помощь.