html实现吸顶效果的几种方式

页面下拉之前是这样的：
想实现滑动滚动条往下的时候，导航保持在顶部的效果有几种方式实现？

一：使用jquery实现

	
	












	

		

			

				

					

						
						
					
				
			
		
	

	

		

			
首页
			
游戏中心
			
游戏礼包
			
游戏开测
			
坛友新闻
			
手游排行
			
游戏专区
			
手游攻略
			
坦克评测
			
游戏视频
			
游戏规划
		
	




2

2

1

1

1

1

1

1

1

二、仅css，搜索框+导航fixed

	.header_warp{
		position:fixed;
		left:0;
		top:0;
		width:100%;

	}

	#body{
		margin-top: 130px;
	}

这个不好的一点是 搜索框 也会固定在顶部，并且需要注意的是内容区域要添加个 margin-top 吸顶部分的高度。

三、内容部分 absolute，导航 fixed

可以看到header样式中有个 z-index=1 ，是因为如果不加高导航的层级，在内容部分下滑展示的时候会在导航上面划过。

	header{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		z-index: 1;
	}

	#body{
		position: absolute;
		left:0;
		width:100%;
		top: 130px;
	}