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

修改

以下是我想要的例子：

enter image description here

Answer 1

我希望这就是你所追求的 - 从描述中可视化有点困难。

有一些技巧可以让它发挥作用：

当右侧顶部变为正向时，反转滚动方向

确保.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/

我还重构了一些代码以减少重复。

Answer 2

你只需要使div.body的高度等于其中元素的总高度。由js或css。

替代方向滚动下面的内容

2 个答案: