feat:新增导航栏吸顶效果

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>