替代方向滚动下面的内容

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/

我还对您的代码进行了一些重构以减少重复。