分屏滾動網站無法正常工作

Question

我試圖重新創建我在網上看到的效果：example。所以有兩列一個滾動和一個滾動。見圖片：

現在我不是最好的，但編碼器我來過了這個：

var update = function() { 
    $('.right').height($(window).height()); 
    $('.right .content').height($(window).height() * 5); 
    $('.left .content').height($(window).height() * 5); 
    $('.col, .content').width($(window).width()/2); 
    $('.right').scrollTop((
    $('.right .content').height() - $(window).height()) * (
    1 - $(window).scrollTop()/($('.left .content').height() - $(window).height()))); 
}; 

$(document).ready(function() { 
    update(); 
}); 
$(window).scroll(function() { 
    update(); 
}); 
$(window).resize(function() { 
    update(); 
}); 

見JSfiddle，它似乎是工作，但如果我嘗試添加100百分比到每邊，它停止工作的一些奇怪的原因。右側只是不再滾動，如果我添加這些div ..

任何人都可以弄清楚什麼是錯的？或者有沒有人有更好的例子來說明如何實現這一目標？

在此先感謝

Answer 1

我創建了一個修訂版，它允許獨立頁，而不是兩個長列，我想從你的描述，這應該滿足您的需求：

JSFiddle

HTML

<div class="body"> 
    <div class="col left"> 
     <div class="content">1</div> 
     <div class="content">2</div> 
     <div class="content">3</div> 
    </div> 
    <div class="col right"> 
     <div class="content">1</div> 
     <div class="content">2</div> 
     <div class="content">3</div> 
    </div> 
</div> 

CSS

html, body { 
    margin:0; 
    height:100%; 
    width:100%; 
} 
.body { 
    height:100%; 
    position:relative; 
} 
.col 
{ 
    height:100%; 
    width:50%; 
    display:inline-block; 
    margin:0; 
} 
.content 
{ 
    position:relative; 
    height:100%; 
} 
.col.left .content:nth-child(odd) { 
    background:steelblue; 
} 
.col.left .content:nth-child(even) { 
    background:blue; 
} 
.col.right .content:nth-child(odd) { 
    background:pink;  
} 
.col.right .content:nth-child(even) { 
    background:red;  
} 
.col.right 
{ 
    position:fixed; 
    top:0; 
    right:0; 
} 

JS

(function ($) { 
    var top = 0; 

    $(document).ready(function() { 
     var contentHeight = $('.right').height(), 
      contents = $('.right > .content').length; 

     top = (0 - (contentHeight * (contents - 1))); 

     $('.right').css('top', top + 'px'); 
    }); 

    $(window).resize(function() { 
     var contentHeight = $('.right').height(), 
      contents = $('.right > .content').length; 

     top = (0 - (contentHeight * (contents - 1))); 

     $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
    }); 

    $(window).scroll(function() { 
     $('.right').css('top', (top + $(window).scrollTop()) + 'px'); 
    }); 

})(jQuery); 

Answer 2

multiScroll.js類似於你在找什麼，但觸發滾動操作。

• Demo site
• Github repository
• Blog entry