Files
ClassContent/历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/滚动固定.html
2024-09-27 02:06:13 +08:00

43 lines
995 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{
height: 100000px;
}
.header {
width: 100%;
height: 100px;
background: yellow;
}
.fixed{
position:fixed ;
width: 100%;
top: 0;
left: 0%;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<script>
var header = $(".header")
$("body").onscroll = function(){
// 如果滚动距离大于500
if(document.documentElement.scrollTop > 500){
header.className = "header fixed"
}else{
header.className = "header"
}
}
// 封装
function $(className) {
return document.querySelector(className)
}
</script>
</html>