显示效果图：
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
width: 1200px;
margin: 0 auto;
}
.con1 {
width: 100%;
height: 128px;
}
.con2 {
width: 1200px;
height: 40px;
}
.con3 {
width: 100%;
height: 2000px;
background: pink;
}
.con1 img,.con2 img,.con3 img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="con1">
<img src="img/con1.png"/>
</div>
<div class="con2">
<img src="img/fixnav.png"/>
</div>
<div class="con3">
1
</div>
</body>
<script type="text/javascript">
var con2 = document.getElementsByClassName("con2")[0];
var con3 = document.getElementsByClassName("con3")[0];
window.onscroll = function(){
if(scroll().top>=300){
//当超过第一部分内容时，第二部分的导航固定
con2.style.position = "fixed";
con2.style.top = "0px";
//同时第三部分的paddingtop属性进行设置，设置间隔
con3.style.paddingTop = con2.offsetHeight + "px";
}else {
con2.style.position = "";
con3.style.paddingTop = "0px";
}
}
//进行兼容性封装
function scroll(){
return {"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
}
}</script>
</html>