javascript - 交替方向滚动，内容在下方

Question

我有 2 个全高 div。当您向下滚动页面时，一个 div 向上滚动，另一个向相反方向滚动。这很好用。

我试图保持这种效果，但在其下方放置正常的全宽内容，同时尝试保持自然滚动。所以我想保留交替滚动效果，但是当我到达使用此效果的最后一个 div 的底部时，我想继续正常滚动以查看其下方的正常内容。

这是我的 jsFiddle，目前它漂浮在我提到的效果上:http://jsfiddle.net/u9apC/116/并将JS粘贴在下面以供引用:

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

编辑

这是我想要的示例:

Answer 1

我希望这就是您想要的 - 从描述中很难想象。

有几个技巧可以让它工作:

1. 当右上角变为正时反转滚动方向

2. 确保 .row div 的上边距足以将其向下推到左列的底部。

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

在此处查看更新的 JSFiddle:http://jsfiddle.net/u9apC/126/

我还稍微重构了您的代码以减少重复。