Jquery 如何检查元素是否在视口中？

我正在尝试在我的网站上实现一个通知系统。我从中吸取了一些想法（别担心，这非常简单），并对其进行了轻微修改，以适应我的系统

我的情况是，每次向该用户发送新消息时，我都使用一个div，

'.info'

。到目前为止，我已经对其进行了设置，每次用户单击页面时，通知都会移出视口

$(document).on('click',function()
{
    hideAllNotifications();
});

但是，我不希望在收到新消息时发生这种情况，因为用户可能没有注意到通知出现，因此在按下

'.info'

之前，即当用户单击.info横幅时，通知应该保持不变。但是，如果用户在查看此

.info

时单击身体，那么它应该仍然在那里。另一方面，如果所有其他通知div（如

.success、.error

）都可见，则单击正文应该只隐藏这些div

那么我如何实现这一点呢？我一直试图用offset（）、position（）和height（）检查信息是否在视口中，但它们不一致

我试过：

if(($('.info').position().top < 0))
{
    $(document).on('click',function()
    {
        hideAllNotifications();
    });
//      alert("info is out of view");
}
else
{
    $('.info').on('click',function()
    {
        hideAllNotifications();
    });
//      alert("info is inside our view");
}

看看这个：

function getNewMessage()
{
    //retrieve new messages
    showNotification('info', 'You have a new message');
}