Detect when mouse leaves via top of page with jquery

Question

This Jquery problem has been bugging me for a while now. I developed a script, with one function detecting when the mouse leaves via the top of the page. Here is the code:

    $(document).bind("mouseleave", function(e)
    {
    console.log(e.pageY);
    if (e.pageY <= 1)
        {    
        now = new Date();           
        for (i=0; i < times.length; i++)
            {
            if (now.getTime() > times[i][0] && now.getTime() < times[i][1])
                {
                    $.fn.colorbox({iframe:true, width:650, height:600, href: "work.html", open: true});          
                }    
            }
        }
    });

This works perfectly for me in all browsers. For some reason it works randomly in Chrome and seemingly not at all in Firefox for a friend that tested the site. In my browser (firefox 3.5.3), e.pageY is logged in the console box as a number near 0, however in my friends browser (also firefox 3.5.3) the lowest value is around 240. I have no idea why this is happening considering identical browsers. Does anyone have a clue as to how to debug this, or another more reliable method to detect when the mouse goes out of the webpage via the top? I hope this makes sense.

Answer 1

The problem appears if your window scrolls down, add a bunch of <br/>s to your page and scroll down one line and you'll see it.

So instead of looking to see if e.pageY <=1, subtract out the scrollTop:

if (e.pageY - $(window).scrollTop() <= 1)
    {    
    // do something
    }