滚动时将图像动态更改为 rgb 和灰度

Question

我对 JavaScript 还是很陌生，并试图在向下滚动时将我的图像从 RGB 转换为灰度，反之亦然。我管理我的图像在滚动时得到灰度值，但是我没有回到 RGB 图像。

我的 JavaScript 代码是：

let element = document.getElementById("image");




window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    element.style.filter = 'grayscale(1)';
  } else {
    element.src =    'ttps://images.unsplash.com/photo-1542903660-eedba2cda473?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80'
    
    
  }
};

它也在https://jsfiddle.net/vdszymh7/139/上公开

也许您对如何在这两种模式之间动态切换有一些建议。

Answer 1

你想要达到的目标可以通过这种方式完成：

window.onscroll = function() {
  var scrollLimit = 100;
  if (window.scrollY >= scrollLimit) {
    element.style.filter = 'grayscale(1)';
    console.log('gray')
  } else {
    element.style.filter = 'none'
  }
};