使用jQuery创建视差效果

Question

我想用jQuery创建视差效果。我在页面上有3个框，我想在用户向下滚动时折叠所有三​​个div，当用户向上滚动时，他们应该再次分开。所以我使用scroll事件，我不能分开他们，当用户向上滚动。 this是我fiddle link和下面是我的代码： Latest Fiddlehttp://jsfiddle.net/iiison/nkf4Y/3/ JS：

$(window).scroll(function() { 
    var x = $(this).scrollTop(); 
    if(isVis($('.cnt')[0])){ 
     var x = $('.lft').offset().left, 
     y = $('.rit').offset().left; 
     $('.lft').offset({left:($('.lft').offset().left+10)}); 
     $('.rit').offset({left:($('.rit').offset().left-10)}); 
     //console.log(); 
    } 
}); 

我还有一个疑问，如何在特定的位置，根据不同的屏幕宽度崩溃股利。 Fiddle

Answer 1

会这样的帮助吗？

http://jsfiddle.net/Ms7gw/

var lastScrollTop = 0; 
var leftBox = $('#left').position(); 
var rightBox = $('#right').position(); 

$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    $('#right').css({left: rightBox.left + st}); 
    $('#left').css({left: leftBox.left - st}); 
    lastScrollTop = st; 
});