視差滾動問題（jQuery）

Question

使用以下plugin，我構建了一個簡單的視差原型。

到目前爲止，我得到這個：

HTML

<div id="one" class="js-background-1 color"> 
    <div class="box"> 
     <h2>Italian breakfast</h2> 
     <p>bla bla</p> 
    </div> 
</div> 

<div id="two" class="js-background-1 color"> 
    <div class="box"> 
     <h2>German breakfast</h2> 
     <p>bla bla</p> 
    </div> 
</div> 

<div id="three" class="js-background-1 color"> 
    <div class="box"> 
     <h2>Box-2</h2> 
     <p>bla bla</p> 
    </div> 
</div> 

JS

$(document).ready(function() { 

    $('.color').each(function(i) { 
     var position = $(this).position(), 
      positionSLider = $('.slidingPannel').position(); 
     $(this).scrollspy({ 
      min: position.top, 
      max: position.top + $(this).height(), 
      onEnter: function(element, position) { 
       console.log('box sliding in from the right'); 
      }, 
      onLeave: function(element, position) { 
       console.log('box sliding out'); 
      } 
     }); 
    }); 
}); 

CSS

body{margin:0} 

.color{ 
    z-index:9999; 
} 

#one{ 
    background: url(breakfast.jpg) 50% 0 no-repeat fixed; 
    color: white; 
    height: 1300px; 
    margin: 0; 
} 

#two{ 
    background: url(http://120dollarsfoodchallenge.files.wordpress.com/2011/02/pancakeshortstack.jpg) 50% 20% no-repeat fixed; 
    color: white; 
    height: 1300px; 
    margin: 0; 
    padding: 160px 0 0 0; 
} 

#three{ 
    background: url(http://yourstudentbody.com/wp-content/uploads/2013/01/Athlete_-porridge-healthy-breakfast.jpg) 50% 50% no-repeat fixed; 
    color: white; 
    height: 1300px; 
    margin: 0; 
    padding: 160px 0 0 0; 
} 

.color{ 
    border-top:2px solid #030; 
} 

h2{ 
    margin:0; 
} 

p{ 
    margin-top:10px; 
} 

.box{ 
    width:400px; 
    text-align:center; 
    background-color:#CCC; 
    opacity:0.8; 
    margin:12% auto 0; 
    color:#000; 
    font:arial; 
    padding:10px 20px; 
} 

在這個頂部，我想添加一個從右側滑動的每個幻燈片的面板。

所以：

• 一個新的幻燈片進來
• 面板從右側滑入
• 幻燈片一起消失與面板，其將在滑入下一個幻燈片

我的意思是右邊的面板的例子是here。

這個問題是，當我滑到第二個我仍然有'console.log（'從右側滑入框'）;'這隻會消失，直到第二張幻燈片觸及頂部。

在幻燈片到達頂端之前，有沒有一種方法可以讓右側的面板可見一點？

Answer 1

我會推薦使用JavaScript庫，如Skrollr.js。

您將對動畫有最好的控制，最重要的是時機。

查看我們的這兩個教程，讓你開始與Skrollr：

• Simple parallax scrolling tutorial
• How to create a parallax scrolling website