整整折腾下一午，终于弄出了个相对满意的效果，各位看官可以把页面往下拉一拉？耶~看导航栏：

daoh-1.jpg daoh-2.jpg

当然这么强大的东东当然是用神奇般强大的jQuery实现的！

先来简单说说原理：监测浏览器滚动条的距离，大于一定长度时，给导航栏添加“position:fixed”，小于则取消，同时还添加了animate自定义的透明度渐变过渡！

相关jQuery代码段：

 
$(window).scroll(function(){
 
	var scrollTop = $(window).scrollTop();
 
	if(scrollTop > 66)
 
		$('#menu').css({position:'fixed',top:'0px'}).stop().animate({'opacity':'0.8'},400);
 
	else
 
		$('#menu').css({position:'static'}).stop().animate({'opacity':'1'},400);
 
});
 
$('#menu').hover(function(){
 
	var scrollTop = $(window).scrollTop();
 
	if(scrollTop > 66){
 
		$('#menu').stop().animate({'opacity':'1'},400);}
 
	},function(){
 
	var scrollTop = $(window).scrollTop();
 
	if(scrollTop > 66){
 
		$('#menu').stop().animate({'opacity':'0.8'},400);
 
	}
 
});

说明：在jQuery1.2.3版下无反应，使用1.3.2就正常工作了，神奇……

如果有童鞋要使用的话，代码中的#menu需改动为自己导航栏的ID，另外，请用一个div包裹整个导航栏，然后添加和导航栏同高的height站位，防止紧接导航后的元素直接跳上来被覆盖，还有就是给导航加个z-index:9999层设置。