Dynamically changing image to rgb and grayscle when scrolling-CodePudding

I'm pretty new to JavaScript and trying to make my image from RGB to Grayscale while scrolling down and vise versa. I managed my image to get grayvalued when scrolling however I don't get back to the RGB image.

My code for JavaScript is:

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'
    
    
  }
};

It's also public on https://jsfiddle.net/vdszymh7/139/

Maybe you have some suggestions how to dynamically change between these two modes.

CodePudding user response：

What you're trying to achieve could be done by this way:

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