Files
ClassContent/历届学生/fontendseven/项目练习/上课项目/滚动固定/index.html
2024-09-27 02:06:13 +08:00

47 lines
1001 B
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
height: 6000px;
}
.header {
width: 100%;
background: red;
height: 50px;
}
.fixed {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="header "></div>
</body>
<script>
window.addEventListener("scroll", function () {
var top = document.documentElement.scrollTop;
top > 300 ? $(".header").classList.add("fixed") : $(".header").classList.remove("fixed")
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>