突出显示最靠近视口中间的元素

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");