Видны несколько элементов - Нужна функция, чтобы определить, что выше на странице? - PullRequest
1 голос
/ 16 декабря 2011

Я использую следующий код, который я получил из другого поста, сделанного несколько лет назад, для идентификации элементов, которые полностью видны в браузере пользователя:

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. Может быть, использовать position () для всех элементов с классом .nav, а затем вернуть элемент, который находится ближе всего к вершине и виден?

...