Javascript 检测div是否位于屏幕的特定部分

在我正在使用的网站上，我希望用户可以滚动并单击图标来“打开”它们。例如，如果用户单击“关于我们”图标，它将有一段信息，用户可以在其中上下滚动文本并单击“后退”按钮。“后退”按钮会将用户带回到图标，在那里他们可以再次滚动选择另一个图标。我想知道当下划线图标出现在屏幕上时（而不是单击时），如何检测到它？我正在使用slots JS制作动画，我不知道如何检测它是否出现在屏幕上

我试过这个：

function isOnScreen(){
  console.log($("#theMiddle").height());
  if (($("#middleID").offset().top + $("#middleID").height()) >=     $("#theMiddle").height()) {
    return true;
  }
  else{
    return false;
  }
}

document.body.style.overflow=“hidden”；
//上下键的按键笔划
//设置我们的容器
var el=document.querySelector（“#theMiddle”）；
//创建新的SlotMachine
var插槽=新插槽机器（el，{}）；
函数isOnScreen（）{
console.log（$（“#中间”）.height（）；
如果（$（“#middleID”）.offset（）.top+$（“#middleID”）.height（））>=$（“#middle”）.height（））{
返回true；
}
否则{
返回false；
}
}
函数open（）{
动画({
目标：“右分区”，
translateX：{
价值：200，
持续时间：500
}
});
动画({
目标：“左分区”，
translateX：{
值：-200，
持续时间：500
}
});
}
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（例如，keyCode==“40”）{
//这是下来的
//这将打开它
open（）；
log（isOnScreen（））；
slot.prev（）；
}否则，如果（例如，keyCode==“38”）{
open（）；
log（isOnScreen（））；
slot.next（）；
}
}
//滚动检测在这里发生，没有滚动条
$（“html”）。在（“鼠标滚轮”上，函数（e）{
open（）；
var delta=e.originalEvent.wheelDelta；
if（δ<0）{
//这是用于向下滚动的
//动画打开了制动器
slot.prev（）；
}
如果（增量>0）{
slot.next（）；
}
});
//这是用于检测中间div中的div的点击。
//1=第二个图像，2=第三个图像
$（“.middle div”）。单击（函数（）{
if（$（this）.index（）=='1'）{
$（“#theMiddle”）.fadeOut（“slow”，function（）{
$（'#aboutTextID'）.fadeIn（“slow”，function（）{}）；
$（“#backButtonID”）.fadeIn（“slow”，function（）{}）；
//创建btn后，在此定义事件处理程序
$（“#backButtonID”）。单击（函数（）{
控制台日志（“返回”）；
$（'#aboutTextID'）。淡出（“慢”，函数（）{
$（“#backButtonID”）.fadeOut（“慢”，函数（）{
$（'theMiddle'）.fadeIn（“slow”，function（）{}）；
});
});
});
});
}
if（$（this）.index（）=='2'）{
$（“#theMiddle”）.fadeOut（“slow”，function（）{
$（'applyButtonID'）.fadeIn（“slow”，function（）{}）；
$（“#backButtonID”）.fadeIn（“slow”，function（）{}）；
//创建btn后，在此定义事件处理程序
$（“#backButtonID”）。单击（函数（）{
控制台日志（“返回”）；
$（'#applyButtonID'）。淡出（“慢”，函数（）{
$（“#backButtonID”）.fadeOut（“慢”，函数（）{
$（'theMiddle'）.fadeIn（“slow”，function（）{}）；
});
});
});
});
}
});
.box{
位置：相对位置；
宽度：100px；
高度：100px；
保证金：4倍；
显示：内联块；
}
左分区{
位置：绝对位置；
左：390px；
}
中区{
位置：绝对位置；
左：490px；
顶部：150px；
}
右分区{
位置：绝对位置；
左：870px；
}
#左，#右{
宽度：290px；
浮动：左；
}
#中间的{
宽度：自动；
浮动：左；
}
#中间地带{
左：490px；
顶部：150px；
}
#福{
位置：绝对位置；
高度：300px；
宽度：400px；
左：490px；
顶部：100px；
溢出y：滚动
}
#大约{
位置：绝对位置；
显示：无；
高度：300px；
宽度：400px；
左：490px；
顶部：100px；
溢出y：滚动
}
.后背按钮{
位置：绝对位置；
显示：无；
高度：20px；
宽度：70px；
左：490px；
顶部：90px；
}
#苹果按钮{
位置：绝对位置；
显示：无；
高度：20px；
宽度：120px；
左：600px；
顶部：200px；
}

强调
返回
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而受到劳动的伤害。知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而受到劳动的伤害。知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，不能因为工作上的过失而受到劳动的伤害。知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。我们必须尽可能少地进行练习
var div = document.getElementById("example");
var left = div.getBoundingClientRect().left;
var top = div.getBoundingClientRect().top;
alert("X position: " + left + ", Y position: " + top);