Javascript 分屏滚动站点工作不正常

我正在尝试重新创建我在网上看到的效果：。所以有两列，一列向上滚动，一列向下滚动。如图所示：

现在我不是最好的编码员，但我想到了：

var update = function () {
    $('.right').height($(window).height());
    $('.right .content').height($(window).height() * 5);
    $('.left .content').height($(window).height() * 5);
    $('.col, .content').width($(window).width() / 2);
    $('.right').scrollTop((
    $('.right .content').height() - $(window).height()) * (
    1 - $(window).scrollTop() / ($('.left .content').height() - $(window).height())));
};

$(document).ready(function () {
    update();
});
$(window).scroll(function () {
    update();
});
$(window).resize(function () {
    update();
});

看，这似乎是可行的，但如果我尝试在每一边都添加100%的div，它会因为一些奇怪的原因停止工作。如果我添加这些div，右侧将不再滚动

有人能找出问题所在吗？或者有谁有更好的例子来说明如何做到这一点

---

提前感谢

我创建了一个修订版，允许单独的页面而不是两个长列，从您的描述中，我认为这应该满足您的需要：

HTML

JS

---

您可以发布不工作的JSFIDLE示例吗？我将100%宽度设置为divs，一切都很好。有一个插件可以创建类似的效果，但它使用的是自动滚动，而不是普通的滚动：谢谢，伙计！这就是我想要的

<div class="body">
    <div class="col left">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    <div class="col right">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
</div>

html, body {
    margin:0;
    height:100%;
    width:100%;
}
.body {
    height:100%;
    position:relative;
}
.col
{
    height:100%;
    width:50%;
    display:inline-block;
    margin:0;
}
.content
{
    position:relative;
    height:100%;
}
.col.left .content:nth-child(odd) {
   background:steelblue;
}
.col.left .content:nth-child(even) {
   background:blue;
}
.col.right .content:nth-child(odd) {
   background:pink;    
}
.col.right .content:nth-child(even) {
   background:red;    
}
.col.right
{
    position:fixed;
    top:0;
    right:0;
}

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