固定导航栏的实现

本章节主要利用的三张图片来分别代表头部部分，导航栏和内容部分，实现一个固定导航栏！

html代码：

*<div id="topPart"><img src="74ebe0bf8b246922-e44f78b4b2d8f20a-4eb98badf0ad8bb168a036ccae9e450a.jpg" width="1336" height="100" alt=""/>
</div>
<div id="navPart"><img src="74ebe0bf8b246922-e44f78b4b2d8f20a-213e543aaa1e9a8d397616b0724de341.jpg" width="1336" height="200" alt=""/>
</div>
<div class="main" id="mainPart"><img src="74ebe0bf8b246922-e44f78b4b2d8f20a-e4d798150cdba6672b5973b73a4214c6.jpg" width="1000" height="1000" alt=""/>
</div>*

图片可以自由添加，本人图仅供参考，src=“图片”；

css代码：

*{
		margin: 0;
		padding: 0;
	}
	.main{
		margin-top: 10px;
		width: 1000px;
		margin: 0 auto;
	}
	img{
		vertical-align: top;/*垂直对齐顶部的距离*/
	}
	.fixed{
		top:0px;
		left: 0px;
        position:fixed;
	    
	}

*号代码整个页面都可以使用，相当于一个全局变量；fixed是固定位置用的，脱离原来的页面，固定不动

js代码：

<script>
	var topPart=document.getElementById("topPart");//头部部分
	var navPart=document.getElementById("navPart");//导航栏部分
	var mainPart=document.getElementById("mainPart");//内容部分
	
	//设置滚动事件onscroll
	window.onscroll=function(){
		//如果向上滚动的距离大于头部部分时。
		if(scroll().top>topPart.offsetHeight){
			//获取属性fixed，固定定位（脱离原来的文本）
			navPart.className="fixed";
			mainPart.style.paddingTop=navPart.offsetHeight+"px";
		}
		else{
			navPart.className="";//取空
			mainPart.style.paddingTop = 0;//内容部分与导航栏部分的距离为0
		}
	};
	//定义scroll函数
	function scroll(){
	    var o={	top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
       left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
		};
		return o;
	}
</script>

代码中的window.pageYOffset是scroll.Y的别名。同样window.pageXOffset是scroll.X的别名，分别获取左上角和左下角的距离，其他部分代码中有所解释，请参考。