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

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