Javascript 如何保持快速滚动div在同一位置，独立于屏幕大小？

为了使不同的数据滚动速度属性具有不同的滚动速度，我使用以下js：

$.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];

  $(this).each(function(){
    instances.push(new moveItItem($(this)));
  });

  window.onscroll = function(){
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst){
      inst.update(scrollTop);
    });
  }
}

var moveItItem = function(el){
  this.el = $(el);
  this.speed = this.el.attr('data-scroll-speed');
};

moveItItem.prototype.update = function(scrollTop){
  var pos = scrollTop / this.speed;
  this.el.css('transform', 'translateY(' + -pos + 'px)');
};

$(function(){
  $('[data-scroll-speed]').moveIt();
});

我的问题是，如果我调整浏览器窗口的大小，图像的垂直位置（我在其上使用了此js，而主内容具有默认速度）会发生变化，即图像显示在主内容的不同区域；我怎样才能使它们保持与屏幕大小无关的准确位置

主要内容已经完全响应（字体大小在vw中指定，更快的滚动图像根据屏幕宽度调整大小，等等）