多个元素可见——需要函数来确定页面上哪个元素较高？

Question

我正在使用以下代码（我从几年前的另一篇文章中获得）来识别在用户浏览器中完全可见的元素：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

，我检查多个元素并在函数返回时滚动到它们：

        if(isScrolledIntoView($('#hero')) && (!($('#hero').hasClass('selected')))){
            $('div, img').removeClass('selected');
            $('#hero').addClass("selected");
            $("#nav-dock").animate({top: '200px'});
        }

        if(isScrolledIntoView($('#home-digital-trans')) && (!($('#home-digital-trans').hasClass('selected')))){
            $('div, img').removeClass('selected');
            $('#home-digital-trans').addClass("selected");
            $("#nav-dock").animate({top: '800px'});
        }

然后 在一些罕见的情况下，我会同时看到两个元素。因此，我试图弄清楚如何编写一个函数，如果多个元素可见，该函数可以选择“更高”的元素。

我什至不知道从哪里开始——我真的不是一个 jQuery 程序员。也许对类 .nav 的所有元素使用position()，然后返回最接近顶部且可见的元素？