Acerque el elemento al centro de la pantalla en jQuery

Tengo una list de divisiones de elementos en la página.

ejemplo:

<div data-page='1' class'item' ></div> <div data-page='1' class'item' ></div> <div data-page='1' class'item' ></div> <div data-page='2' class'item' ></div> <div data-page='2' class'item' ></div> <div data-page='2' class'item' ></div> <div data-page='3' class'item' ></div> <div data-page='3' class'item' ></div> <div data-page='3' class'item' ></div> 

Necesito encontrar el elemento que está en la parte más central de la pantalla y get su número de data-page .

Si todos los div están cerca del button de la página o no están visibles porque están en la parte inferior de la página, obtengo el más alto porque está más cerca del centro, y si todos los div están por encima del medio o no son visibles porque están en la parte superior de la window fuera de la vista visible, obtengo la parte inferior del div porque está más cerca del centro.

Lo que probé ( fuente ):

 $(".item").sort(function(a,b){ return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top)) })[0].css("background", "networking"); 

La function anterior no funcionó para mí, porque resaltaba en rojo el elemento más inferior.

¿Cómo puedo hacer eso en jQuery y también informar continuamente el más cercano a medida que desploop verticalmente la página?

En el evento de desplazamiento, puede get el centro del plano y luego recorrer los elementos que desea verificar y get cada una de sus posiciones y encontrar cuál está más cerca de la mitad de la pantalla

  $(function(){ $(window).scroll(function(){ // get the scroll position of the document + half the window height var scrollTop = $(document).scrollTop() + ($(window).height() / 2); var positions = []; // push each of the items we want to check against to an array with their position and selector $('.item').each(function(){ $(this).removeClass("active"); positions.push({position:$(this).position().top, element: $(this)}); }); var getClosest = closest(positions,scrollTop); getClosest.addClass("active"); // the element closest to the middle of the screen console.log( getClosest.attr("data-page") ); }); // finds the nearest position (from an array of objects) to the specified number function closest(array, number) { var num = 0; for (var i = array.length - 1; i >= 0; i--) { if(Math.abs(number - array[i].position) < Math.abs(number - array[num].position)){ num = i; } } return array[num].element; } }); 

Aquí hay un ejemplo de trabajo

puede usar document.elementFromPoint con las coorderadas xey del medio de la pantalla

 document.addEventListener("scroll", function(){ let x = window.innerWidth / 2; let y = window.innerHeight / 2; let element = document.elementFromPoint(x, y); let page = element.getAttribute("data-page"); document.querySelector(".middle") && document.querySelector(".middle").classList.remove("middle"); element.classList.add("middle"); }) 

leer más sobre document.elementFromPoint

aquí hay un ejemplo de Codepen