为黑色和白色定义一个类，为颜色定义另一个类：

.contact {
  filter: grayscale(100%);
  -webkit-filter:grayscale(100%);*
}
.contact:hover, .contact-color {
  filter: grayscale(0);
  -webkit-filter:grayscale(0);
}

字符串
然后在窗口上添加一个监听器：

var images = document.getElementsByClassName('contact');
var changeFrom = 500; // from which amount of scroll do you want the effect to appear ?

window.addEventListener('scroll', function() {
  if (window.scrollY >= changeFrom ) {
    [].forEach.call(images, function(image) {
      image.classList.add('contact-color');
    });
  }
  else {
    [].forEach.call(images, function(image) {
      image.classList.remove('contact-color');
    });
  }
});

型
颜色将改变时，达到垂直滚动的定义量，并会恢复，如果你向上滚动。我不知道这是否正是你想要的，但你可以很容易地适应它取决于你的需要。

不知道我是否理解正确，但我假设你希望你的图像在滚动时打开b/w。独立于你在页面上的位置。
JavaScript有一个onScroll事件，但是每次滚动时都会触发，所以第一次得到这个事件时，如果半秒内没有触发滚动事件，就改为b/w并将颜色改回来。我使用setbacks（）来延迟完成这一任务。
这里有一个小提琴，显示的概念：https://jsfiddle.net/rzqcwzrh/107/

$("#idOfUl").on( 'scroll', function(){
  if(!$( "#idOfUl" ).hasClass( "red" ))
    $("#idOfUl").addClass("red");
  setTimeout(function(){
    $("#idOfUl").removeClass("red");
  }, 500);
});

字符串