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

福利：阿里云服务器-全场景 首次购买ECS享实例首台5折，限时领取红包

现在很多网站的副导航都具有智能判断跟随页面滚动的效果：默认情况下，导航是安静的跟随页面流自动布局的；当页面向下滚动，移动到导航部位时，导航就会自动附着在页面顶部。

举个例子，京东的商品介绍页中的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效果：智能判断跟随页面滚动的导航