Detecta si un div está en cierta parte de la pantalla

En el sitio en el que trabajo, deseo que los usuarios se desplacen y hagan clic en los icons para “abrirlos”. Por ejemplo, si un usuario hace clic en el ícono sobre nosotros, tendrá un párrafo de información en el que puede desplazarse hacia arriba y hacia abajo junto con un botón de retroceso. el botón Atrás llevaría al usuario de vuelta al ícono, donde puede desplazarse una vez más para elegir otro ícono. Me preguntaba cómo puedo hacer que mi icono de subrayado sea detectado cuando está en la pantalla (no cuando se hace clic). Estoy usando máquinas tragamonedas JS para la animación y no sé cómo detectar si está en la pantalla.

He intentado esto:

function isOnScreen(){ console.log($("#theMiddle").height()); if (($("#middleID").offset().top + $("#middleID").height()) >= $("#theMiddle").height()) { return true; } else{ return false; } } 
 document.body.style.overflow = "hidden"; //the key strokes for the up and down keys // Set up our container var el = document.querySelector("#theMiddle"); // Create new SlotMachine var slot = new SlotMachine(el, {}); function isOnScreen(){ console.log($("#theMiddle").height()); if (($("#middleID").offset().top + $("#middleID").height()) >= $("#theMiddle").height()) { return true; } else{ return false; } } function open() { anime({ targets: "div.right", translateX: { value: 200, duration: 500 } }); anime({ targets: "div.left", translateX: { value: -200, duration: 500 } }); } document.onkeydown = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == "40") { //this is down //this will open it up open(); console.log(isOnScreen()); slot.prev(); } else if (e.keyCode == "38") { open(); console.log(isOnScreen()); slot.next(); } } //Scroll detection occurs here, without the scrollbar $("html").on("mousewheel", function(e) { open(); var delta = e.originalEvent.wheelDelta; if (delta  0) { slot.next(); } }); //this is for detecting clicks for the divs in the middle div // 1 = the 2nd image , 2 = the 3rd image $(".middle div").click(function() { if ($(this).index() == '1') { $('#theMiddle').fadeOut("slow", function() { $('#aboutTextID').fadeIn("slow", function() {}); $("#backButtonID").fadeIn("slow", function() {}); //Define the event handler here after the btn has been created $("#backButtonID").click(function() { console.log("back"); $('#aboutTextID').fadeOut("slow", function() { $("#backButtonID").fadeOut("slow", function() { $('#theMiddle').fadeIn("slow", function() {}); }); }); }); }); } if ($(this).index() == '2') { $('#theMiddle').fadeOut("slow", function() { $('#applyButtonID').fadeIn("slow", function() {}); $("#backButtonID").fadeIn("slow", function() {}); //Define the event handler here after the btn has been created $("#backButtonID").click(function() { console.log("back"); $('#applyButtonID').fadeOut("slow", function() { $("#backButtonID").fadeOut("slow", function() { $('#theMiddle').fadeIn("slow", function() {}); }); }); }); }); } }); 
 .box{ position: relative; width: 100px; height: 100px; margin: 4px; display: inline-block; } div.left { position: absolute; left: 390px; } div.middle { position: absolute; left: 490px; top: 150px; } div.right { position: absolute; left: 870px; } #left,#right{ width: 290px; float: left; } #middle{ width: auto; float: left; } #theMiddle{ left: 490px; top: 150px; } #foo { position: absolute; height: 300px; width: 400px; left: 490px; top: 100px; overflow-y: scroll } #aboutTextID{ position: absolute; display: none; height: 300px; width: 400px; left: 490px; top: 100px; overflow-y: scroll } .backButton{ position: absolute; display: none; height: 20px; width: 70px; left: 490px; top: 90px; } #applyButtonID{ position: absolute; display: none; height: 20px; width: 120px; left: 600px; top:200px; } 
    Underscores     

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })()

Para obtener la posición de un elemento, puede usar getBoundingClientRect()

Ejemplo:

 var div = document.getElementById("example"); var left = div.getBoundingClientRect().left; var top = div.getBoundingClientRect().top; alert("X position: " + left + ", Y position: " + top);