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

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

给这个镜头-----＆gt; http://viget.com/inspire/jquery-stick-em

在这里演示：-----＆gt; 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;
}

视差分屏，交替滚动侧面

1 个答案: