分屏滚动网站无法正常工作

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