Я использую следующий код, который я получил из другого поста, сделанного несколько лет назад, для идентификации элементов, которые полностью видны в браузере пользователя:
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, а затем вернуть элемент, который находится ближе всего к вершине и виден?