<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>
//获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滚动事件
window.onscroll=function () {
//向上卷曲出去的距离和最上面的div的高度对比
if(getScroll().top>=my$("topPart").offsetHeight){
//设置第二个div的类样式
my$("navBar").className="nav fixed";
//设置第三个div的marginTop的值
my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
}else{
my$("navBar").className="nav";
my$("mainPart").style.marginTop="10px";
}
};
//获取浏览器向上卷曲出去的距离的值,向左卷曲出去的距离
// function getScroll() {
// var obj={};
// var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.left=left;
// obj.top=top1;
// return obj;
//
// }
// function getScroll() {
// var obj={};
// obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// return obj;
//
// }
// function getScroll() {
// var obj = {
// left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
// top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
// };
// return obj;
//
// }
//浏览器的滚动事件
// window.onscroll=function () {
//console.log(getScroll().top);
// };
//向上卷曲出去的距离
网友评论