☰

jQuery ウェイポイントの「アップ」イベントの異なるオフセット 質問する

tag-icon • tag-icon jquery jquery-waypoints
jQuery ウェイポイントの「アップ」イベントの異なるオフセット 質問する

jQuery ウェイポイントに 2 つのオフセットがあればいいのですが。現在は上下スクロール用に同じものが 1 つだけあります。

私は 25% の「下」オフセットを使用していますが、「上」オフセットは「75%」にしたいと考えています。つまり、ブロックの上部がビューポートの上部の 25% にあり、スクロールが下方向になっている場合、「下」がトリガーされます。また、ブロックの上部がビューポートの上部の 75% にあり、スクロールが上方向になっている場合、「上」がトリガーされます。

すでに誰かがこのコードを書いているヒステリシス?

ベストアンサー1

これを実現するには、それぞれ異なるオフセットを持ち、それぞれが 1 つの方向にのみ応答する 2 つのウェイポイントを作成します。

$('.thing').waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
}).waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});

アップデート: Waypoints 3.0 の jQuery ビルドを使用している場合、jQuery オブジェクトがチェーンされなくなったため、上記のコードは機能しませんwaypoint。代わりに、作成された Waypoint インスタンスの配列を返します。その配列参照を保持したくない場合は、コードは次のようになります。

var $things = $('.thing');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    // Do stuff
  }
}, {
  offset: '25%'
});

$things.waypoint(function(direction) {
  if (direction === 'up') {
    // Do stuff
  }
}, {
  offset: '75%'
});

おすすめ記事