固定导航栏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>
//获取页面向上卷曲出去的距离
function getScrollTop() {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
}
function getScrollLeft() {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
}
window.onscroll=function () {
//获取id为topPart的高度,再获取滚动条向上出去的距离
if(getScrollTop()>=my$("topPart").offsetHeight){
my$("navBar").className="nav fixed";
my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
}else{
my$("navBar").className="nav";
my$("mainPart").style.marginTop=0+"px";
}
};
</script>
</body>
</html>
