使用图片创建响应式滚动转换

Question

我正在处理一个页面，其中的内容分为几个不同的部分。在右侧，每个部分都有一个与之关联的图像。我没有为每个人提供静态图像，而是试图让一个固定的图像在滚动到每个部分时发生变化。我遇到了以下jquery代码：

jQuery(window).scroll(function(){
  var fromTopPx = 200; // distance to trigger
  var scrolledFromtop = jQuery(window).scrollTop();
  if(scrolledFromtop > fromTopPx){
    jQuery('html').addClass('scrolled');
  }else{
    jQuery('html').removeClass('scrolled');
  }
});

这会改变图像区域的类名，我可以使用css过渡将其换出。问题在于触发器基于距顶部的像素距离，由于文本流的变化，该距离会随着屏幕尺寸的不同而变化。有没有办法可以根据到达部分来设置触发器？我在想是否有子标题的锚点，可以触发它，但我发现的是基于点击链接，而不是滚动。

有没有人有可能的解决方案？感谢