How to get the first DOM element that is visible in a viewport?

Question

How can I get the first DOM element that is visible in a viewport?

PS: the first DOM element in a page will not be the first "visible" element when I scroll to the middle or bottom of the page

Answer 1

In mind with the scroll, you'll need to query the whole document, get the elements offset positions, and match that agains the scrollTop value of the window. Then query the :eq(0) (jQuery) of those.

EDIT: I think this sample will work, haven't tried it out yet tho, since I'm unable to access any fiddle here at work computers.

$(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);
});