first commit

历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-2-24/淘宝头部定位_js案例.html

@@ -0,0 +1,56 @@
+<!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>