JS Waypoint-在两个偏移之间按像素进行动画处理

Question

我有以下三个div，从-60px到60px顶部。

我要在滚动上做的是按照此示例在像素滚动的相反方向上移动第一个和最后一个div； https://noni.com.mt/（第2节）。

我想出一种方法可以通过使用WayPoint.js来实现，但是我不确定如何复制相同的效果。

目前，我不确定如何在两个偏移量之间的用户滚动上设置动画的最高位置，所以到目前为止，我唯一的代码是：-

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'down') {
      $('#service-1').stop().css("top", "60px");         
   } 
  },
  offset: '90%',    
});

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'up') {
      $('#service-1').stop().css("top", "-60px");
   } 
  },
  offset: '10%',    
}) 

这将在到达每个偏移量时简单地更改为最高位置。如果有更简单的方法可以实现这一目标，或者比航点更好的方法，请告诉我。