2

オブジェクトがスクロールしてビューポートに表示されると、jquery waypoints はコールバックを発生させます。これは、基本的な実装では問題なく機能します。

ここで、同じ ' article ' タグに 2 つのウェイポイントを指定しようとしまし<article />た。<article />offset: 121

// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
        currentIndex = $(this).index();
        if (direction === "down") {
            $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
        }
});

// waypoint 2
$.aquaverde.article.find('.page').waypoint(function(event, direction) {
        if (direction === "down") {
            $.aquaverde.wrapper.find(".fixed").hide();
        }
    },{
    offset: 121
});

残念ながら、プラグインは、オブジェクトが上から 121 ピクセルのときに両方のコールバックを起動するため、2 番目の構成が優先されます。

OK、次に連鎖呼び出しを試みました。

// waypoint 1
$.aquaverde.article.waypoint(function(event, direction) {
        currentIndex = $(this).index();
        if (direction === "down") {
            $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();

            // waypoint 2
            $(this).waypoint(function(event, direction) {
                $.aquaverde.wrapper.find(".fixed").hide();
            },{
                offset: 121             
            });
        }
});

しかし、上記とまったく同じ結果が得られます。それを解決するためのアイデアはありますか？

http://imakewebthings.github.com/jquery-waypoints/

ありがとうございました。

4

1 に答える 1

8

更新:以下はすべて、jQuery Waypoints 1.x に当てはまります。元の回答以降、Waypoints 2.0 がリリースされ、同じ要素で複数のウェイポイントのサポートが含まれています。2回呼び出すだけのOPの方法はwaypointうまくいくはずです。(ただし、コールバック シグネチャは 1 つのパラメーターのみに変更されていますdirection。)

これは現在、jQuery ウェイポイントでは不可能です。各要素は 1 つのオフセットしか持てないため、2 番目のオフセットが最初のオフセットをオーバーライドします。少し埋もれていますが、以前にこれについて開かれた問題がありました。そこでの私の回答には、この制限を回避するための 2 つの方法があります。

  • 2 番目の要素を使用します。これは、ページ上で article 要素と同じオフセットを持つラッパーまたはその他の要素です。
  • GitHub の問題の場合は、ビュー内で別のプラグインを使用してください。

それらは今のところあなたの最善の策です。これは便利なので、新しい問題を作成しましたが、プラグインを大幅に修正する必要があります。

更新:上記の回答は引き続き当てはまります。あなたの特定のケースでは、子要素を使用してやろうとしていることはうまくいきますがevent.stopPropagation()、子ウェイポイント内に呼び出しを追加して、イベントがバブリングして記事のウェイポイントを起動しないようにし、効果的にあなたを一掃する必要があります通話を非表示にします。

于 2012-01-26T11:14:15.210 に答える