如何使用jQuery找到离当前位置最近的元素答案

【问题标题】：How to find the closest element to the current position with jQuery如何使用jQuery找到离当前位置最近的元素
【发布时间】：2015-07-02 13:28:43
【问题描述】：

我有一个包含如下几个部分的文档：

<div class='section' id='sec1'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec2'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec3'>
    lalala
    lalala
    lalala
</div>

<div class='section' id='sec4'>
    lalala
    lalala
    lalala
</div>

我如何抓取最接近当前滚动位置的<div.section>（大概这相当于读者当前正在查看的部分）？

【问题讨论】：

除了使用悬停之外，您还可以获取滚动位置并从中减去每个“.section”的高度，直到它为 0 或更小。包装这些 div 的次数越多，这就越困难。
在这些 div 周围有相当多的内容，其中包含很多内容（它是来自 docbook 的 HTML 输出）
gizmovation 无论如何都提供了一种更好的方法

标签： javascript jquery

【解决方案1】：

您可以使用$(window).scrollTop() 和$(el).postion().top 来计算滚动后元素离屏幕顶部的距离。

然后，您可以根据需要使用此信息来操作元素。

这是一个有效的 jsfiddle 示例： http://jsfiddle.net/gizmovation/x8FDU/

【讨论】：

大家好，我想知道这是否也可以使用纯 JavaScript 来实现？

【解决方案2】：

当您悬停一个元素时，mousemove 事件会告诉您悬停在哪个元素上。

$(document).bind('mousemove', function(e) {
    e.target
    /*
        the target in click/hover events
        is the element that the event was
        triggered on.
    */
});

一个缺点可能是 e.target 会为您提供具有最高 z-index 的元素 - 最顶层中的元素 - 因此，如果您在文本上方有叠加层，它将为您提供叠加层不是文字div。

【讨论】：

请在您的答案中添加更多说明并解释其工作原理。
@johannes - 评论中的解释非常清楚 IMO。每当您将鼠标悬停在一个元素上时，mousemove 事件就会告诉您您悬停在哪个元素上。