jQuery实现导航栏的隐藏与显示效果

一直都在有些网站上看到导航栏显示隐藏的效果，倒是自己没有做过，前两天做页面的时候要用到，于是研究了一下，代码如下：

//This is for navigation bar hide.
	$(document).mouseleave(function(e){
		$("#testspan").text(e.pageX + ", " + e.pageY + ", " + $(window).height() + ", " + $(window).width());
		
			if(e.pageX <= $(window).height())
			{
				if(e.pageY < e.pageX)
				{
					$(".pg_header").css("top", "2px");
				}
			}
			else{
				if(e.pageY < ($(window).width() -e.pageX)){
					$(".pg_header").css("top", "2px");
				}
			}
	    	
	    });
	//This is for navigation bar show.
	$(document).mousemove(function(e){
	    	if(e.pageY > $(".pg_hd_size").height())
		    {
		    	$(".pg_header").css("top", "-300px");
		    }
	    });

注：1、.pg_hd_size定义为导航栏的宽度大小等信息，.pg_header定义导航栏的位置。

2、本代码可以直接饮用，需要了解原理的请看下面说明。

3、本代码在FF下编译通过，未测试其他浏览器效果。

研究过程：

1、本来准备使用获得鼠标坐标来判断y坐标小于0（及离开页面顶端）时显示导航栏，不过鼠标移动速度过快时，即使鼠标已经离开了页面，但是获得的鼠标坐标值（"#testspan"中显示)依然大于0，显然有误差，但是我们又不能奢望用户慢慢地移动鼠标，所以此路不通；

2、换个思路，使用mouseleave事件，判断鼠标离开页面时执行操作，不过问题又来了，屏幕有四个边缘（即使最大化时也还有上下两个边缘），所以我们必须判断鼠标离开页面时走的是那条路（哪个边缘），这里就需要加入一个判断了，经过大量的数据测试（鼠标离开屏幕上边缘时得到的坐标数据），我得出了一个结论，如果屏幕是一个正方形，那么每次鼠标离开上边缘时，纵坐标的值都小于横坐标，那么写判断就很简单了，可以参考代码（懒得画图了）；

3、至于这里屏幕的宽度和高度为什么用window而不用body，我只能说可能是我自己的原因，我每次使用body的时候都会得到一个错误的高度，可能是因为使用了框架，不过具体错在哪我目前也不太清楚，凑合着用吧。