交替滾動邊的視差分割屏幕

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