本章节主要利用的三张图片来分别代表头部部分,导航栏和内容部分,实现一个固定导航栏!
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的别名,分别获取左上角和左下角的距离,其他部分代码中有所解释,请参考。