jquery - 要素がビューポートにあるかどうかを確認するにはどうすればよいですか?

Question

Web サイトに通知システムを実装しようとしています。http://www.red-team-design.com/cool-notification-messages-with-css3-jqueryからアイデアを取り入れました(非常に単純なので心配しないでください)。それに合うように少し変更しました。私のシステムで。

私の状況では、'.info'このユーザーに新しいメッセージが送信されるたびに、正確には div の 1 つを使用しています。これまでのところ、ユーザーがページをクリックするたびに通知がビューポートの外に移動するように設定しました。

$(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');
}