为什么这个简单的滚动事件动画如此janky？

Question

我正在尝试重新创建一个粘贴的位置元素，当您滚动时，该元素会锚定在页面的左侧。我不能使用position: fixed因为元素需要与y轴一起移动（即它仅锁定在x轴上）。对于最简单的滚动事件，我看到了一个不合理的jank级别：

我想使用即将推出的position: sticky，但浏览器支持并不是我很乐意使用它。任何人都可以解释为什么这么笨拙？请参阅以下示例，该示例使用left样式属性的相同定位来实现相同的效果，但没有任何jank（我已经包含了元素检查器，只是为了证明它确实是left正在调整的定位！）：

我还探讨过使用transform: translateX(..)，但这仍会导致同样的问题。这是第一个GIF的代码：

var sticky = document.getElementById("sticky");

var update = function() {
  sticky.style.left = window.scrollX + "px";
}

window.addEventListener('scroll', update);

body {
  width: 4000px;
}
#sticky {
  width: 400px;
  padding: 1em;
  position: relative;
  background: lightblue;
}

<div id="sticky">
  I'm janky
</div>

上面的CodePen：http://codepen.io/anon/pen/bBWgQg。

我在第二个例子中深入研究了JavaScript，我可以确认它没有使用requestAnimationFrame() - 它只是一个简单的jQuery行：

$(elem).css('left', e.currentTarget.scrollLeft)

有人能够解释为什么我的如此笨拙而另一个例子不是吗？