0

DIV が他の DIV の上に積み重ねられた大きな垂直スクロールがあります。ユーザーが現在どの DIV を見ているかを把握しようとしています。ウェイポイントを使用してこれをかなりうまく行うことができましたが、ユーザーが DIV 内により多くのコンテンツをロードできるようにし (これにより DIV の高さが高くなります)、ウェイポイントが台無しになっているようです。

私のウェイポイント コードは次のようになります。DIV ごとに 1 つずつあります。

$(function() {

var $things = $('#infoWrapper');

$things.waypoint(function(direction) {
  if (direction === 'down') {
    //do stuff
  }
}, { offset: function() {
    return $(this).height()-($.waypoints('viewportHeight') / 3);
  }
});

$things.waypoint(function(direction) {
  if (direction === 'up') {
    //do stuff
  }
}, {
  offset: function() {
    return -$(this).height()+($.waypoints('viewportHeight') / 1.2);
  }
});

});

これを行うためのより良い方法があるかどうか疑問に思っていました。おそらく、DIV をテストして、どの DIV が viewportHeight の割合が最も高いかを確認します (ユーザーがスクロールして、DIV1 が 20%、DIV2 が 40% の場合、DIV2 コードなどを実行します)。

どの DIV (高さが不明) が現在表示されているかを知る最良の方法は何ですか?

4

1 に答える 1

1

まさにそのために作られたこのjQuery-Visibleプラグインをチェックすることをお勧めします。スクロール位置に関係なく、要素がブラウザーのビジュアル ビューポート内にあるかどうかをすばやく確認できます。ユーザーがこの要素を見ることができる場合、関数は true を返します。そこから、どちらがビューポートの大部分を占めているかを判断できます。これは単純な計算である必要があります。このようにして、実際に表示されている項目のみをテストします。

于 2013-05-28T16:41:07.640 に答える