测量滚动的最准确方法是什么？

Question

我正在制作一个幻灯片滚动页面，并且我试图使其滚动，就像您要拉动一个便签卡并在其后紧接下一个便笺卡一样。

为此，我将它们全部固定好，然后基于滚动移动它们的“顶部”位置。但是然后，我还需要将面板的大小设置为主体。

很难描述我在做什么，所以这里是演示：https://codepen.io/NotDan/pen/vzraJE 这是导致我的问题的特定代码段：

//what's going on here?
$(window).scroll(function(){
  var panelNum = parseInt($(window).scrollTop()/$(window).height());//detemines panel number
  var pixelMovement = ($(window).scrollTop())-(panelNum*$(".panel").height()); determines how many pixels to move the panel by
  $('body').find(".panel:eq("+panelNum+")").css("top", -1*pixelMovement); 
});

问题是当用户快速滚动时，顶部位置设置不正确，并且有一些悬垂。同样，很难解释，但是如果您跳到演示并快速滚动，您将明白我的意思。

是否有更精确的滚动测量方式？还是有更好的方法来做我想做的事情？我已经尝试过scrollmagic，它的“部分擦除”功能确实很接近，但是它们使前一个向上移动而不是向上移动上一个。