如何获取视口中可见的第一个DOM元素？

Question

如何获取视口中可见的第一个DOM元素？

PS：当我滚动到页面的中间或底部时，页面中的第一个DOM元素将不是第一个“可见”元素

Answer 1

使用滚动时，您需要查询整个文档，获取元素偏移位置，并再次匹配窗口的scrollTop值。然后查询那些:eq(0)（jQuery）。

编辑：我认为此示例有效，但尚未尝试过，因为我无法在工作计算机上访问任何小提琴。

$(function () {
    var scroll = $(window).scrollTop();
    var elements = $("*"); // VERY VERY bad performance tho, watch out!
    var el;
    for (var i=0; i<elements.length; i++) {
        el = $(elements[i]);
        if (el.offset().top >= scroll && el.is(':visible')){
            // "el" is the first visible element here!
            // Do something fancy with it

            // Quit the loop
            break;
        }
    }
});

Answer 2

$(function () {
    var $sections = $(".main > section");
    var idxCurSection = -1; // Index of first visible section
    var scroll = $(window).scrollTop();
    var el;
    for (var i = 0; i < $sections.length; i++) {
        el = $($sections[i]);
        if (el.offset().top >= scroll && el.is(':visible')) {
            idxCurSection = i;
            break;
        }
    }
    if (idxCurSection === -1)
        idxCurSection = $sections.length - 1;

    alert("Index of first visible section: " + idxCurSection);
});