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
