web-dev-qa-db-ja.com

jqueryウェイポイント「アップ」イベントの異なるオフセット

私はjqueryウェイポイントに2つのオフセットを持っているのが好きです。現在、上下にスクロールするための同じものは1つだけです。

25％の「ダウン」オフセットを使用していますが、「75％」の「アップ」オフセットが必要です。そのため、ブロックの上部がビューポートの上部の25％にあり、スコアリングがダウンしている場合、「ダウン」がトリガーされます。そして、ブロックの上部がビューポートの上部の75％にあり、スコアリングが開始されると、「アップ」がトリガーされます。

誰かがすでにこのためのコードを書いている hysteresis ？

jqueryjquery-waypoints
21
Softlion

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

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

pdate：Waypoints 3.0のjQueryビルドを使用している場合、waypointがjQueryオブジェクトをチェーンしないため、上記のコードは機能しません。代わりに、作成されたウェイポイントインスタンスの配列を返します。その配列参照を維持することに関心がない場合、コードは次のようになります。

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%'
});
58
imakewebthings