4

すべてのドキュメントでは、ウェイポイントがビューポートの上部に到達したときに説明していますが、ウェイポイントのいずれかの部分がビューポートの中央にあるときにトリガーが発生するようにしたいと思います。

このコードは、下にスクロールしている場合はかなりうまく機能しますが、上にスクロールすると、明らかに機能しません。

$('.section').waypoint(function(direction) {
    highlight('#' + this.id);
}, {
    context: '#scroll',
    offset: function (direction) {
        return $(this).height();
    }
});

以下のコードといくつかのバリアントを試しましたが、どちらのreturnステートメントにもヒットしませんでした。

$('.section').waypoint(function(direction) {
    highlight('#' + this.id);
}, {
    context: '#scroll',

    offset: function (direction) {
        if (direction == 'down') {
            return -$(this).height();
        } else {
            return 0;
        }
    }
});

ウェイポイントの例に基づいてこれを試していますが、$ active.idはthis.idのように機能しないため、関数「highlight」が失敗します。

$('.section').waypoint(function (direction) {
    var $active = $(this);
    if (direction == 'down') {
        $active = $active.prev();
    }
    if (!$active.length) {
        $active = $(this);
    }
    highlight($active.id);
}, {
    context: '#scroll',
    offset: function (direction) {
        return $(this).height();
    }
});
4

1 に答える 1

16

このoffsetオプションは方向パラメータを取りません。direction関数で使用しているセクションがあるoffset場合、それは間違いであるため、ドキュメントのどこかからそれを取得したかどうかを知りたいです。

％オフセットを使用して、要素の上部がビューポートの中央に当たったときにトリガーするウェイポイントを指示できます。

offset: '50%'

上にスクロールするときと下にスクロールするときに異なるオフセットが必要な場合は、次の2つの異なるウェイポイントを作成するのが最適です。

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

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

$things.waypoint(function(direction) {
  if (direction === 'up') {
    // do stuff
  }
}, {
  offset: function() {
    // This is the calculation that would give you
    // "bottom of element hits middle of window"
    return $.waypoints('viewportHeight') / 2 - $(this).outerHeight();
  }
});
于 2013-01-30T00:16:33.293 に答える