使用jQuery創建視差效果

Question

我正在嘗試使用jQuery創建視差效果。 我在頁面上有3個框，當用戶向下滾動時，我想將所有三個div合為1，當用戶向上滾動時，它們應該再次分開。 因此，我為此使用了scroll事件，當用戶向上滾動時，我無法將它們分開。 這是我的小提琴鏈接 ，下面是我的代碼： 最新的小提琴 http://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();
    }
});

我還有一個疑問，如何根據不同的屏幕寬度在特定位置折疊div。 小提琴

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;
});