title: How to solve element flicker while scrolling with parallax effect in JavaScript?
body: <p>I am trying to re-create website with parallax effect using JavaScript. That means that I have two or more layers, that are moving different speeds while scrolling. </p>
  
  <p>In my case I'm moving only one layer, the other one remains static:
  layer 1 = website text;
  layer 2 = element background;</p>
  
  <p>for this I'm using simple source code (with jQuery 1.6.4):</p>
  
  <pre><code>var docwindow = $(window);
  
  function newpos(pos, adjust, ratio){
     return ((pos - adjust) * ratio)  + "px";
  }
  
  function move(){
     var pos = docwindow.scrollTop();
     element.css({'top' : newpos(pos, 0, 0.5)});
  }
  
  $(window).scroll(function(){
     move();
  });
  </code></pre>
  
  <p>The Problem:
  - All calculations are done right and the effect "works" as expected. But there is some performance glitch under some browsers (Chrome MAC/Windows, Opera MAC, IE, paradoxically not Safari).</p>
  
  <p>What do I see during scrolling?
  - While scrolling the background moves in one direction together with scroll, but it seems to occasionally jump few pixels back and then forth, which creates very disturbing effect (not fluid).</p>
  
  <p>Solutions that I tried:
  - adding a timer to limit scroll events
  - using .animate() method with short duration instead of .css() method.</p>
  
  <p>I've also observed, that the animation is smooth when using .scrollTo method (scrollTo jQuery plugin). So I suspect that there is something wrong with firing scroll events (too fast).</p>
  
  <p>Have you observed the same behavior?
  Do you know, how to fix it?
  Can you post a better solution?</p>
  
  <p>Thanks for all responses</p>
  
  <p>EDIT #1:
  Here you can find jsfiddle demonstration (with timer): <a href="http://jsfiddle.net/4h9Ye/1/" rel="noreferrer">http://jsfiddle.net/4h9Ye/1/</a></p>