如何使用jQuery查找距离当前位置最近的元素

Question

我有一个文档，其中有几个像这样的部分：

<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>（假设这将等同于读者当前正在查看的部分）？

- Scribblemacher

---

除了使用hover，您还可以获取滚动位置并从中减去每个“.section”的高度，直到它为0或更少。随着包装这些div的数量越来越多，这将变得越来越困难。 - bygrace

这些 div 周围包裹了相当多的内容，并且里面有很多东西（它是 docbook 的 HTML 输出）。 - Scribblemacher

gizmovation提供了更好的方法，无论如何。 - bygrace

Answer 1

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

然后，您可以使用这些信息根据需要操纵元素。

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

- christurnerio

---

大家好， 我在想这个能否也用普通的 JavaScript 实现？ - AppRoyale

Answer 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。

- Mihai Stancu

---

请在您的答案中添加更多的解释，并解释为什么它有效。 - Hanna

@johannes -- 我认为评论中的解释已经很清楚了。每当你悬停在一个元素上时，mousemove 事件会告诉你你正在悬停的是哪个元素。 - Mihai Stancu