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的时候都会得到一个错误的高度，可能是因为使用了框架，不过具体错在哪我目前也不太清楚，凑合着用吧。