How do I stop a element hit area from moving off the screen when window is scrolled, JavaScript/Jquery?

Question

When I scroll the window/page the hit area denoted by the 100 value in n.mousePositionY('.nav', 100); moves off the page/screen. Is there a way of always having that 100 value stay on the screen irrespective of scrolling...it's for a navigation menu I'm working on. Here's the code so far:

    //$('.nav').hide();
    var n = new Object();

    n.mousePositionY = function(className, y){
        $(window).mousemove(function(e){
            if(e.pageY < y){ $(className).fadeIn(200); }
            if(e.pageY > y){ $(className).fadeOut(200); }
        });
    }

    n.mousePositionY('.nav', 100); 

Any help would greatly be appreciated, thanks

Answer 1

If you need a hit area, why don't you use a fixed element and its mouseover event?

http://jsfiddle.net/bZdaU/

<div id="hitme"></div>

#hitme {
   position: fixed;
   top: 100;
   left: 30px;
   height: 30px;
   width: 100px;
}

$('#hitme').mouseover( function() {
    console.log('mouse in hit area');
});