10

divが画面の中央にあるかどうかを判断する方法があるかどうかを知る必要があります。

HTML：

<div id="container">
 <div class="box" id="box0">
  text
 </div>
 <div class="box" id="box1">
  text
 </div>

 .....

 <div class="box" id="box100">
  text
 </div>
</div>

ページがスクロール可能であることを考慮して、divが表示されている画面の中央にいつ表示されるかを決定する方法はありますか？したがって、基本的に、ユーザーがページを下にスクロールしているときは、表示されている画面の中央にあるdivを選択する必要があります。

ありがとう

4

3 に答える 3

2

ウィンドウの高さとウィンドウの scrollTop() は、ユーザー ビューに存在するオフセットの範囲を示します。

var minHeight = $(window).scrollTop()
var maxHeight = $(window).height()
var middleHeight = (maxHeight + minHeight) / 2;

次のようなビューポート セレクターを使用してみて ください。 http://www.appelsiini.net/projects/viewport これにより、すべての可視要素が得られます。プラグインは必要ありませんが、選択が容易になります

var visibleElements = $("div.box").filter(":in-viewport")

この選択から、middleHeight に最も近い要素を探すことができます。

var $midElement;
var distance = null;
var currDistance = 0;
visibleElements.each(function(index, element) {
    currDistance = Math.abs(middleHeight - $midElement.offset().top);
    if ( distance == null || currDistance < distance ) {
        $midElement = $(element);
        distance = currDistance;
    }
});

これをテストしていませんが、正しい軌道に沿っているはずです。

于 2012-08-01T14:34:28.357 に答える