title: Javascript set translate with scroll event is slow
body: <p>i have a problem when setting <code>transform: translateY();</code> based on scroll event <code>value</code>.</p>
  
  <p>basically, <code>#moveme</code> will disappering while scroll event trigger.</p>
  
  <p>check this fiddle out for live action : <a href="https://jsfiddle.net/bo6e0wet/1/" rel="nofollow">https://jsfiddle.net/bo6e0wet/1/</a></p>
  
  <p>here is the code :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="moveme"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(window).on("scroll", function() {
  
    var currentScroll = $(this).scrollTop();  
  
    if (currentScroll &lt;= 50) {
  
      $("#moveme").css("transform", "translate3d(0," + -currentScroll + "px, 0");
  
    }
  
  });
  </code></pre>
  
  <p>why did <code>moveme</code> not diappering totally? is it because scroll event fires too much, so the DOM did not get it quickly?</p>
  
  <p>i try scrollng very slow, with my touch pad. it's working perfect. </p>
  
  <p><strong>but</strong> if i press <code>CTRL + DOWN ARROW</code> which mean force to scroll to down of the page. <code>moveme</code> stuck.</p>
  
  <p>how to solve this problem?</p>
  
  <p>what's wrong with my code?</p>
  
  <p>thanks in advance...</p>