Cuộn hướng thay thế với nội dung bên dưới

Question

Tôi có 2 div chiều cao đầy đủ. Khi bạn di chuyển xuống trang, một div sẽ cuộn lên và cuộn còn lại theo hướng ngược lại. Điều này làm việc tuyệt vời.

Tôi đang cố gắng giữ hiệu ứng này nhưng đặt nội dung toàn bộ chiều rộng bình thường bên dưới nó trong khi cố gắng duy trì cuộn tự nhiên. Vì vậy, tôi muốn giữ hiệu ứng cuộn thay thế nhưng khi tôi đến đáy của div cuối cùng sử dụng hiệu ứng này, tôi muốn tiếp tục cuộn bình thường để xem nội dung bình thường bên dưới nó.

Dưới đây là jsFiddle của tôi, hiện nay nó lơ lửng trên tác dụng tôi tham khảo: http://jsfiddle.net/u9apC/116/ và JS được dán bên dưới để tham khảo:

(function ($) { 
var top = 0; 

$(document).ready(function() { 
    var contentHeight = $('.right').height(), 
     contents = $('.right > .content').length; 

    top = (0 - (contentHeight * (contents - 1))); 

    $('.right').css('top', top + 'px'); 
}); 

$(window).resize(function() { 
    var contentHeight = $('.right').height(), 
     contents = $('.right > .content').length; 

    top = (0 - (contentHeight * (contents - 1))); 

    $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
}); 

$(window).scroll(function() { 
    $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
}); 

})(jQuery); 

EDIT

Dưới đây là một minh họa về những gì tôi muốn:

Answer 1

Tôi hy vọng đây là những gì bạn đang theo dõi - hơi khó để hình dung từ mô tả.

Có một vài thủ thuật để làm việc này:

1. Đảo ngược hướng di chuyển khi col trên bên phải đi tích cực

2. Đảm bảo div .row có lề trên đủ để đẩy nó xuống đến cuối col bên trái.

   (function ($) { 
       var top = 0; 
       var contentHeight = 0; 
   
       $(document).ready(function() { 
        calcContentHeight(); 
       }); 
   
       $(window).resize(function() { 
        calcContentHeight(); 
       }); 
   
       $(window).scroll(function() { 
        setRightTop(); 
       }); 
   
       function calcContentHeight() { 
        var contents = $('.right > .content').length - 1; 
        contentHeight = $('.right').height() * contents; 
   
        top = 0 - contentHeight; 
        setRightTop(); 
       } 
   
       function setRightTop() { 
        var rightTop = top + $(window).scrollTop(); 
   
        //1. don't allow right col top to go positive 
        if(rightTop > 0) rightTop = 0 - rightTop; 
        $('.right').css('top', rightTop + 'px'); 
   
        //2. Ensure .row has sufficient top margin 
        $('.row').css('margin-top', contentHeight + 'px'); 
       } 
   
   })(jQuery); 
   

Xem cập nhật JSFiddle đây: http://jsfiddle.net/u9apC/126/

Tôi cũng đã refactored mã của bạn một chút để giảm sự chồng chéo.

Answer 2

Bạn chỉ cần làm cho anh ấy ight của div.body bằng tổng chiều cao của các phần tử bên trong nó. Hoặc bằng js hoặc css.