js实现导航固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内容滚动事件</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
}
.header{
height: 130px;
background: red;
font: 700 28px/130px serif;
color: aqua;
text-align: center;
}
.nav{
height: 60px;
width: 100%;
background: green;
font: 700 24px/60px serif;
color: rgb(240, 240, 14);
text-align: center;
}
ul{
display: inline-block;
}
li{
float: left;
margin-left: 60px; }
.content1,
.content2,
.content3 {
height: 500px;
background: #DFFCB5;
font: 400 60px/800px serif;
color: #52524E;
text-align: center;
}
.content2 {
background: #FFE1B6;
}
.content3 {
background: #CDE3EB;
}
.fixed {
position: fixed;
top: 0;
left: 0;
} </style>
</head>
<body>
<div class="header" id="header">
顶部广告栏
</div>
<div class="nav" id="nav">
<ul>
<li>主页</li>
<li>商城</li>
<li>产品展示</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</div>
<div class="content1" id="con">
内容1
</div>
<div class="content2">
内容2
</div>
<div class="content3">
内容3
</div>
</body>
</html>
<script>
var header = document.getElementById('header');
var nav = document.getElementById('nav');
var content = document.getElementById('con'); // 封装一个scrollTop兼容性函数
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
} // 给页面注册滚动事件
window.onscroll = function() {
// 判断广告栏header 与 滚动的scrollTop的值
// 当scrollTop > header高度的时候 让导航栏 nav 固定定位
var scrollTop = getScrollTop();
if (scrollTop >= header.offsetHeight) {
// 样式中有的类名这里一定不要忘了加上去，否则就会被替换掉
nav.className = "nav fixed";
// 一旦标题栏设置了固定定位之后，就脱离标准流了，下面的内容就会顶上来，
// 所以要手动给下面的内容添加一个margin-top，将导航栏的位置留下来
content.style.marginTop = nav.offsetHeight + "px";
} else {
// 当scrollTop < header高度的时候 让导航栏 nav 恢复到原来的位置
// nav 取消固定定位，恢复到原来的位置，所以下面内容的margin-top也要去掉
nav.className = "nav"; // 去掉固定定位的样式，保留之前的样式
content.style.marginTop = 0;
}
}; </script>