仿京东导航

4 months ago · ba5264591a
parent 0c9fab6738
commit ba5264591a
1 changed files with 77 additions and 0 deletions
--- a/仿京东导航.html
+++ b/仿京东导航.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>仿京东导航</title>
+</head>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .header {
+        position: fixed;
+        top: -80px;
+        text-align: center;
+        left: 0;
+        width: 100%;
+        height: 80px;
+        background-color: #faaf86;
+        color: #000;
+        line-height: 80px;
+        font-size: 30px;
+        transition: all 0.3s;
+
+    }
+
+    .content {
+        overflow: hidden;
+        width: 1000px;
+        height: 2000px;
+        background-color: #a3efa2;
+        margin: 0 auto;
+    }
+
+    .sk {
+        width: 300px;
+        height: 300px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #faaf86;
+        margin-top: 200px;
+    }
+</style>
+
+<body>
+    <div class="header">导航栏</div>
+    <div class="content">
+        <div class="sk">
+            秒杀模块
+        </div>
+    </div>
+    </div>
+    <script>
+        const sk = document.querySelector('.sk')
+        const header = document.querySelector('.header')
+        //页面滚动事件
+        window.addEventListener('scroll', function () {
+            const n = document.documentElement.scrollTop
+            // if( n >= sk.offsetTop){
+            //     header.style.top = 0
+            //  } 
+            // else {
+            // //     header.style.top = '-80px'
+            // // }
+
+            //简写
+            header.style.top = n >= sk.offsetTop ? 0 : '-80px'
+        })
+    </script>
+</body>
+
+</html>