Javascript 具有交替滚动边的视差分割屏幕

我期待着创建一个简单的视差分割屏幕网站，允许我一旦一个新的屏幕加载交替滚动。例如，如果我向下滚动，显示左侧和右侧的内容，我希望锁定右侧，并使滚动仅在左侧发生，直到内容完成

所以应该这样开始：

但一旦部分加载，我只需要左滚动条，如下所示：

---

一旦左侧内容完成，我想提出一个新的部分。你有什么想法吗？实现这一点的最佳JS库是什么？

有几个插件可以很容易地实现这一点

试一试------>

此处演示：-->

我目前正在使用这段硬代码来完成类似的任务，因此这可能也很有用：

    var $window = $(window),
    $mainMenuBar = $('#fixed-div'), //This div will scroll until top
    $menuBarOffset = $mainMenuBar.offset().top,
    window_top = 0,
    footer_offset = $("#end-div").offset().top, //this div tells #fixed-div when to start scrolling
    content = $("#unaffected-div"), //This div scrolls like normal
    panel_height = $mainMenuBar.outerHeight()+'px';


$window.scroll(function() {
    window_top = $window.scrollTop();

    if (window_top >= $menuBarOffset) {
        if (window_top >= footer_offset) {
            $mainMenuBar.removeClass('stick');
            content.css('margin-top', 0);
        } else {
            $mainMenuBar.addClass('stick');
            content.css('margin-top', panel_height);
        }
    }
    else {
        $mainMenuBar.removeClass('stick');
        content.css('margin-top', 0);
    }
});

您还需要将此元素添加到.css文件中

.stick {
position: fixed;
top: 0;
}

---

谢谢你的意见。我试着用木棍，但运气不好。我使用基础作为框架工作，它禁用在容器上的定位。脚本已加载，但未激活类更改。我打算再胡闹几次。如果我想不出来，我会给你举个例子。再次感谢您的回复。下面是一个示例-非常简单，但不确定问题可能是什么stickem无法工作的原因，是因为它没有正确加载插件脚本。看起来您还没有加载任何jQuery库，请将此作为文档中的第一个脚本链接，并查看是否有比以前更好的结果是，在页脚中加载了jQuery。谢谢让它工作了，但无论如何可能会报废。现在的问题是，如果重新调整窗口大小，它将停止工作。