From 3cf0fabe158ba7952ce8f1f525f1d1d536af7c26 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Thu, 14 Dec 2023 17:05:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E5=90=B8=E9=A1=B6=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Bbs.Vue3/src/layout/Index.vue | 36 +++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/Yi.Bbs.Vue3/src/layout/Index.vue b/Yi.Bbs.Vue3/src/layout/Index.vue
index 74ffd21d..61c38e92 100644
--- a/Yi.Bbs.Vue3/src/layout/Index.vue
+++ b/Yi.Bbs.Vue3/src/layout/Index.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header class="common-header">
+      <el-header
+        class="common-header"
+        ref="header"
+        :class="[isFixed ? 'fixed' : '']"
+      >
         <AppHeader />
       </el-header>
       <el-main>
@@ -11,13 +15,35 @@
   </div>
 </template>
 <script setup>
+import { ref, onMounted } from "vue";
 import AppHeader from "./AppHeader.vue";
 import AppBody from "./AppBody.vue";
+
+const header = ref(null);
+const isFixed = ref(false);
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+const handleScroll = () => {
+  const scrollTop =
+    window.scrollY ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  const currentEle = header.value.$el;
+  if (scrollTop > currentEle.offsetTop) {
+    isFixed.value = true;
+  } else {
+    isFixed.value = false;
+  }
+};
 </script>
 
 <style scoped lang="scss">
 .common {
   &-header {
+    background-color: #fff;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -30,4 +56,12 @@ import AppBody from "./AppBody.vue";
   min-height: 10rem;
   background-color: #f0f2f5;
 }
+
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
 </style>