From 605e977bcba31d5aaff065f9f0956931c83fa41d Mon Sep 17 00:00:00 2001
From: p86outhgb <2676914927@qq.com>
Date: Fri, 18 Oct 2024 21:27:09 +0800
Subject: [PATCH] =?UTF-8?q?bilibili=E5=AF=BC=E8=88=AA=E6=BB=91=E5=8A=A8?=
 =?UTF-8?q?=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bilibili导航滑动案例.html | 96 +++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 bilibili导航滑动案例.html
diff --git a/bilibili导航滑动案例.html b/bilibili导航滑动案例.html
new file mode 100644
index 0000000..a82eb86
--- /dev/null
+++ b/bilibili导航滑动案例.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>bilibili导航滑动案例</title>
+</head>
+
+<body>
+    <style>
+        body,
+        html {
+            height: 100%;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+        }
+
+        .navbar {
+            background-color: #ecf9fa;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 999;
+            width: 100%;
+
+        }
+        div#myNavbar.nav-links {
+            display: flex;
+            justify-content: space-around;
+            margin: 0;
+            list-style: none;
+            vertical-align: middle;
+            font-size: 18px;
+            font-weight: bold;
+            width: 100%;
+        }
+
+        .nav-links a {
+            text-decoration: none;
+            color: #000;
+            padding: 10px 15px;
+            margin: 0 10px;
+            padding: 20px;
+            transition: border-bottom 0.3s ease;
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .line {
+            width: 60px;
+            height: 5px;
+            bottom: 0;
+            display: flex;
+            text-align: center;
+            transform: translateX(130px);
+            background-color: #000;
+            position: absolute;
+            transition: transform 0.3s ease;
+        }
+    </style>
+    <nav class="navbar">
+            <div class="nav-links" id="myNavbar">
+                <a href="#college">首页</a>
+                <a href="#news">分类<a>
+                <a href="#PartyBuilding">报道</a>
+                <a href="#department">资讯</a>
+                <a href="#congratulation">交流</a>
+               
+            </div>
+            <div class="line"></div>
+    </nav>
+    <script>
+        //获取父元素，添加事件委托
+        const list = document.querySelector('.nav-links')
+        const line = document.querySelector('.line')
+
+        //给a注册事件
+        list.addEventListener('click', function (e) {
+            if (e.target.tagName === 'A') {
+                // console.log(11);
+                //得到当前offsetLeft的值
+                // console.log(e.target.offsetLeft);
+                line.style.transform = `translateX(${e.target.offsetLeft}px)`
+
+            }
+
+        })
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
