通过滚动位置停止元素而不会跳转

Question

当达到特定的滚动位置时，我尝试停止元素移动。这是通过JS通过在到达滚动位置（此处：距顶部100像素）时添加CSS“固定”类来完成的：

.fixed {
  position: fixed;
  top: 100px;
}

原则上，这很好。但是，该元素不会立即停止。首先，该元素继续滚动大约半秒，然后它跳回-看起来很糟糕。这取决于浏览器：Safari几乎完美，而Edge中的效果最差。滚动速度越快，效果越糟，尤其是不仅要停止div还要停止图像左右时。

此处是一个有效的示例：https://codepen.io/anon/pen/PybbBd

我看到元素停在其他站点上而没有任何跳跃。有人知道怎么做吗？任何帮助是极大的赞赏！请不要使用jQuery。