jQuery 智能判断跟随页面滚动的导航

现在很多网站的副导航都具有智能判断跟随页面滚动的效果：默认情况下，导航是安静的跟随页面流自动布局的；当页面向下滚动，移动到导航部位时，导航就会自动附着在页面顶部。举个例子，京东的商品介绍页中的Tab切换部分，就是这样的效果。截图如下：（穿越到京东）制作这个效果，大概思路是这样的：1、默认情况下，导航部分是自动布局的；2、当页面滚动，通过js判断页面滚动的距离是否超过导航距离顶部的高度。如果超过，则让导航附着在页面顶部；如果没超过，则还是自动布局。3、还剩下一个问题，让导航附着在页面顶部：IE6以上的浏览器可以采用fixed定位在浏览器顶部，IE6则采用absolute相对于页面顶部来定位。以下是基于jQuery的代码：

$(function(){
//获取导航距离页面顶部的距离
var toTopHeight = $("#nav").offset().top;

//监听页面滚动
$(window).scroll(function() {
//判断页面滚动超过导航时执行的代码
if( $(document).scrollTop() > toTopHeight ){
//检测是否为IE6。jQuery1.9中去掉了msie的方法，所以只好这样写
if ('undefined' == typeof(document.body.style.maxHeight)) {
//页面滚动的距离
var scrollTop = $(document).scrollTop();
//IE6下，用absolute定位，并设置Top值为距离页面顶部的距离
$("#nav").css({'position':'absolute','top':scrollTop+'px'});
}else{
//IE6以上浏览器采用fixed定位
$("#nav").addClass("nav_fixed");
}
}else{//判断页面滚动没有超过导航时执行的代码
if ('undefined' == typeof(document.body.style.maxHeight)) {
//设置Top值为导航距页面顶部的初始值。（IE6为了防止浏览器一下滚动过多，所以不能采用直接去掉定位的方法）
$("#nav").css({'position':'absolute','top':toTopHeight+'px'});
}else{
//IE6以上浏览器移除fixed定位，采用默认流布局
$("#nav").removeClass("nav_fixed");
}
}
});
});

.nav_fixed{position:fixed;top:0;}

这里做了一个简单的DEMO效果：智能判断跟随页面滚动的导航