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

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