title: jQuery to give impression of background scrolling slower
body: <p>I have the following code which is just about working to give the impression of one div scrolling slower than the other, but there is a problem with the background div jolting a little when scrolling.</p>
  
  <p>Any ideas why this is happening and how I might be able to fix it?</p>
  
  <p><strong>EDIT: This doesn't appear to be a problem in all browsers, so I guess I'm now looking for a safer way of achieving this effect...</strong></p>
  
  <p><a href="http://jsfiddle.net/KRv5V/" rel="nofollow">http://jsfiddle.net/KRv5V/</a></p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready( function() {
      $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var divam = 1.2;
        $(".sky").css({
            "top":scrollTop/divam+"px",
            "height":10000-(Math.round(scrollTop/divam))+"px"
        });
      });
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  .sky {
      height:10000px; 
      width:100%; 
      position:absolute; 
      top:0px; 
      left:0px; 
      background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
      z-index:1;
  }
  
  .red {
      height:10000px; 
      width:50%; 
      position:absolute; 
      top:0px; 
      right:25%; 
      background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
      z-index:2; 
      background-position:center;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="sky"&gt;&lt;/div&gt;
  &lt;div class="red"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>