2

独自のカスタム視差プラグインを作成して、項目が画面から遷移する方向を選択できるようにしようとしています。ユーザーがどのようにスクロールしても、サイズに関係なく、それを確認することに固執しています。オブジェクトが正しいポイントで消えるウィンドウ。

現在私は持っています：

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にあります

ありがとうマット

4

1 に答える 1

1

少し古いですが、参考までに...

jQuery の初期化または準備完了イベントでは、スクロール関数をインスタンス化するために、各セクション、記事、アイテム (item.each) を初期化して、それぞれに独自のスクロール関数を持たせる必要があります。

this.each(function(index) {

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

次のようなもの: (コードの設計方法は非常に異なる可能性があります)

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

このようにして、1 つの項目が画面から消えると、次の項目が「現在」になり、スクロールを続ける必要があります。

于 2012-07-21T09:56:38.977 に答える