Question

我正在尝试在我的网站中实施通知系统。我已经从http://www.red-team-design.com/cool-notification-messages-with-css3-jquery中获取了这些想法（不要担心它非常简单）并且我稍微修改了它以适应我的系统。

我的情况是，每次向此用户发送新邮件时，我都会使用其中一个div '.info'。到目前为止我已将其设置为每次用户点击页面时，通知都会移出视口。

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

但是，我不希望在收到新邮件时发生这种情况，因为用户可能没有注意到通知出现，因此在按下'.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');
}

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

0 个答案: