class（香草JS）的元素褪色背景图像

Question

一旦以下元素（再次按类）在视口中，我想在滚动时淡化由 class 名称标识的元素的背景图像。 使用香草 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>

让我知道它是否对您有用，或者您是否需要任何帮助。