Menu que desaparece quando o mouse se afasta

Front-end
, , ,
#1

Olá, estou tentando fazer um menu fixo que executa uma animação até a posição top:-150px quando a posição Y do mouse é maior que 150, e que executa outra animação até a posição top:0 quando a posição Y do mouse é menor ou igual a 150, ou seja um menu retrátil, mas ele também deve desaparecer quando chegar um pouca abaixo do menu estático, mas não consigo fazer ele capturar a posição do mouse a medida que o mesmo se movimenta.

HTML:

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="stylesheets/structure.css" />
		<link rel="stylesheet" type="text/css" href="stylesheets/fixed_structures.css" />
		<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="scripts/fixed_structures_logic.js"></script>
	</head>
	<body>
		<nav id="fixed-menu" class="menu">
			<div class="menu-content">
				<div class="menu-content-inner">
					<ul>
						<center>
							<li><div>Home</div></li>
							<li><div>Web Novels</div></li>
							<li><div>Mangás</div></li>
							<li><div>Autores</div></li>
							<li><div>Como Publicar</div></li>
						</center>
					</ul>
				</div>
			</div>
		</nav>
		<aside id="side-bar">
			<div id="side-bar-content">
				<div id="side-bar-content-inner">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</aside>
		<div id="page">
			<header id="top">
				<div id="top-content">
					<div id="top-content-inner">
					</div>
				</div>
			</header>
			<nav id="static-menu">
				<div class="menu-panel">
					<div class="menu-content">
						<div class="menu-content-inner">
							<ul>
								<center>
									<li><div id="test">Home</div></li>
									<li><div>Web Novels</div></li>
									<li><div>Mangás</div></li>
									<li><div>Autores</div></li>
									<li><div>Como Publicar</div></li>
								</center>
							</ul>
						</div>
					</div>
				</div>
			</nav>
			<aside id="ads">
				<div id="ads-content">
					<div id="ads-content-inner">
					</div>
				</div>
			</aside>
			<article id="main-article">
				<div id="main-article-content">
					<div id="main-article-content-inner">
					</div>
				</div>
			</article>
			<footer id="others">
				<div id="others-content">
					<div id="others-content-inner">
					</div>
				</div>
			</footer>
		</div>
	</body>
</html>

Javascript:

cursorX = 0;
cursorY = 0;
fxm_actived = false;
fxm_shown = true;

$(document).on("mousemove", function(event){
  setInterval(function(){cursorY = event.pageY; cursorX = event.pageX;}, 30);
});

window.onload = function(){
  var m = $(".menu-content-inner");
  m.css("margin-left", (screen.width / 2) - (m.width() / 2) - 5);
  var menuT = setInterval(animMenu, 30,$("#fixed-menu"));
}

window.onscroll = function(){
  var fxm = $("#fixed-menu");
  if($(window).scrollTop() > 500){
    fxm_actived = true;
    //fxm_shown = true;
    fxm.fadeIn(200);
    fxm.css("visibility", "visible");
  }
  else {
    fxm_actived = false;
    fxm.fadeOut(200);
    fxm.css("top", 0);
  }
}

function animMenu(obj){
  if(cursorY <= 150 && fxm_actived && !fxm_shown)showMenu(obj);

  if(cursorY > 150 && fxm_actived && fxm_shown)hideMenu(obj);
}

function showMenu(obj){
  obj.animate({top: "0px"}, 500);
  fxm_shown = true;
}

function hideMenu(obj){
  obj.animate({top: "-150px"}, 500);
  fxm_shown = false;
}

Alguém pode me ajudar?

Desde já agradeço.