<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 10px auto 0;
width: 1000px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
//判断卷去的高度超过topPart的高度
// 1：让navBar有固定定位
// 2: 让mainPart有个marginTop
if ($(window).scrollTop() >= $(".top").height()) {
$(".nav").addClass("fixed");
$(".main").css("marginTop",$(".nav").height()+10);
}else {
$(".nav").removeClass("fixed");
$(".main").css("marginTop",10);
}
});
});
</script>
</head>
<body>
<div class="top" id="topPart">
<img src="imgs/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="imgs/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="imgs/main.png" alt=""/>
</div>
