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

Question

我想创建一个简单的视差分屏网站，它允许我在加载新屏幕后交替滚动。例如，如果我向下滚动，左侧和右侧的内容出现，我想锁定右侧，只在左侧滚动，直到内容完成。

所以它应该这样开始：

http://alvarotrigo.com/blog/multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts/

但一旦加载了该部分，我只需要像这样的左滚动：

http://www.themealings.com.au/leesa/portfolio/nick-jr-parents-blog/

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

Answer 1

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

试试看----->http://viget.com/inspire/jquery-stick-em

此处演示：----->http://davist11.github.io/jQuery-Stickem/

我目前正在使用这个硬代码来完成类似的事情，所以这可能也很有用：

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