カスタム視差

Question

私は自分のカスタム視差プラグインを作成しようとしていますので、アイテムが画面から外れる方向を選択できるようになりました。ユーザーがスクロールしても関係なくオブジェクトが正しいポイントで消えるウィンドウのサイズの

は現在、私は持っている：あなたがこれを推測することができたよう

var lastScrollTop = 0; 
var logoStartPos = $('.bg-logo').position().left; 
$(function(){ 
    $(window).scroll(function(){ 

     var st = $(this).scrollTop(); 
     if (st > lastScrollTop){ 
      if($('.bg-logo').is(':in-viewport')) 
      $('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"}); 
     } else { 
      if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left) 
      $('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"}); 
     } 
     lastScrollTop = st; 

    }); 
}); 

は、それが画面を消灯するまで右の項目に移動します。この方法では、スクロールホイールを使用すると、スクロールバーを使用すると消える時間が長くなるため、結果が変わります。私は混合物を使用するか、別のビューポートを持っていれば、別の結果が得られるという別の問題もあります。

私は結果を達成するためのヒントやポインターを教えてください。

私のコードの作業例がhttp://motoring.egl.me.uk

であるおかげでマット・

Answer 1

日付ビットが、FYI ...、あなたは、各セクションを初期化するために、あなたのjQueryの初期化や準備ができた場合には

必要、article、itemまたはそれが何であれ（item.each）、スクロール関数をインスタンス化して、それぞれが独自のスクロール機能を持​​つようにします。

スクロール機能では、「現在の」セクションであればイベントのみを処理します。どのアイテムが「現在のアイテム」であるかを判断するには、何らかの方法が必要です。多くの場合、これは各項目のウィンドウサイズをグローバル配列に保存し、その比較を現在の場所と比較することによって行われます。

のようなもの：一つの項目が画面から外れなったら、次の項目が「現行」になり、継続すべきである（あなたのコードを設計した方法は、おそらく非常に異なるものになります）。このように

// If this section is in view 
if (($window.scrollTop() + $window.height()) > (topOffset) && 
    ((topOffset + $self.height()) > $window.scrollTop())) 

、スクロールする。