Scrolling Vertical Parallax

I'm working on a simplified vertical parallax (similar to http://nikebetterworld.com).

I've got a quick demo working - the code technically works, but I'm getting a jittery effect on the repaint after each scroll - it seems like the javascript is happening late. Any idea why? I can't see anything in the script that really stands out.

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosit开发者_运维百科ion(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

It looks like the images are being moved twice - first by the browser scroll, and then by your scroll() handler. Hence the jitter.

You might get a cleaner effect by using position:fixed or background-attachment:fixed for the images - this way they are unaffected by the browser scroll, but will be moved by the scroll() handler. You'll no longer have one effect fighting with the other. You'll have to modify your scroll() handler accordingly.

You should check if your scroll callback is being called too often. If this is the case, you can try using setInterval to limit the number of rerenderings:

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250); //in miliseconds