56 lines
1.2 KiB
HTML
56 lines
1.2 KiB
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>淘宝头部定位_js案例</title>
|
||
<style>
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body{
|
||
height: 3000px;
|
||
}
|
||
.header{
|
||
width: 100%;
|
||
height: 60px;
|
||
background: red;
|
||
}
|
||
.test{
|
||
width: 100%;
|
||
height: 60px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test"></div>
|
||
<div class="header"></div>
|
||
|
||
</body>
|
||
<script>
|
||
// 网页绑定事件
|
||
// 获取滚动的距离
|
||
// 大于某个值 给html固定定位，反之不加
|
||
var body=$("body"),
|
||
header = $(".header");
|
||
body.onscroll = () =>{
|
||
var offsetTop = document.documentElement.scrollTop;
|
||
console.log("offsetTop:",offsetTop);
|
||
|
||
// if(offsetTop > 60){
|
||
// header.style.position = "fixed"
|
||
// header.style.top = "0"
|
||
// }else{
|
||
// header.style.position = "static";
|
||
// }
|
||
}
|
||
//封装获取元素
|
||
function $(className){
|
||
return document.querySelector(className)//返回虚拟DOM
|
||
}
|
||
</script>
|
||
</html> |