<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
#main {
margin: 0 auto;
width: 1000px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="my.js"></script>
<script>
window.onload=function() {
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll=function(){
if(scroll().top>height){
middle.className+=" fixed";/*注意空格*/
main.style.paddingTop=middle.offsetHeight+"px";
}else{
middle.className="";
main.style.paddingTop=0;
}
}
}
</script>
</head>
<body>
<div id="top">
<img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="images/nav.png" alt=""/>
</div>
<div id="main">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>