<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 800px;
height: 50px;
margin-bottom: 20px;
background-color: red;
}
nav {
width: 800px;
height: 50px;
background-color: blue;
margin-bottom: 20px;
}
.fix {
position: fixed;
left: 0;
top: 0;
}
.bk {
display: none;
background-color: transparent;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<nav></nav>
<div class="bk"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var oNav = document.querySelector('nav');
var obk = document.querySelector('.bk')
var oT = oNav.offsetTop;
var oH = oNav.offsetHeight;
window.onscroll = function() {
var sc = document.documentElement.scrollTop;
if (oT + oH < sc) {
oNav.className = 'fix';
obk.style.display = 'block'
} else {
oNav.className = ''
obk.style.display = 'none'
}
}
</script>
</body>
</html>
吸顶导航效果
最新推荐文章于 2023-09-26 16:31:10 发布