jquery - ビューポートの中央に最も近い要素を強調表示します

Question

ページに3つのアンカーがあります。ビューポートの中央に最も近いアンカーに応じて固定されているボタンのリストを強調表示したいと思います。

どうすればいいですか？

私はすでにInViewおよびViewportOffsetプラグインを使用しています。

Answer 1

したがって、ビューポートの座標を取得しない場合は、中央を取得できます。

x = (viewport.x2 - viewport.x1) / 2;
y = (viewport.y2 - viewport.y1) / 2;

今、あなたは次のようなことをします:

var distances = [];
var elems = $("a");
elems.each(function(i){
    var o = $(this).offset();
    var d2 = (o.left - x)*(o.left - x) + (o.top - y)*(o.top - y);
    distances[i] = d2
});

これで、配列内の距離の「二乗」が得られたので、最小 (中央に最も近い) を検索する必要があります。

var closest = 0;
for (i=0; i<distances.length;i++) {
    if (distances[i] < distances[closest]) {
         closest = i;
    }
}

これで、最も近い要素のインデックスが「最も近い」にあるため、次のように何でもできます。

elems[i].addClass("higlighted");