描述：当用户滑动离开当前的版面的时候，顶部的banner会自动隐藏，顶部的导航栏固定，当用户返回过来的时候，顶部的导航栏取消固定，顶部的banner也会恢复过来。用户在使用的时候，把呢日荣换成自己的就行，我在这里引用的图片进行的占位。
实现代码：
<!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;
margin-top: 10px;
}
#Q-nav1 {
overflow: hidden;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<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;
}
}
}
function scroll(){
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
</script>
</head>
<body>
<div class="top" id="top">
<img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>