How do I check if element is in viewport?

Question

I am trying to implement a notifications system into my website. I've taken the ideas from http://www.red-team-design.com/cool-notification-messages-with-css3-jquery (Don't worry it's extremely simple) and I've altered it slightly to fit with my system.

My situation is that I am using one of the divs, '.info' to be exact for every time a new message has been sent to this user. I've set it up so far so it every time a user clicks on the page the notifications is moved out of the viewport.

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

However, I do not want this to happen when a new message is received because a user might not have noticed that the notification appeared so it should be persistent until '.info' is pressed i.e. when the user clicks on the .info banner. However if the user clicks on the body while this .info is in view then it should still be there. On the other hand, if all the other notification divs such as .success, .error is visible then clicking the body should just hide those divs.

How then do I implement this? I have been trying to check if info is in viewport with offset(), position() and height() but they are inconsistent.

I've tried:

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");
}

This is my function to get new messages on page refresh:

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