1

src/pages/home/index.vue

 <template>
-    <van-sticky>
-        <div class="header">
-            <Header backgroundBox="white" :show="false">
-                <div class="tools">
-                <van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
-                    @clear="handleRefresh" />
-                <div class="right" @click="router.push({ name: 'publish' })">
-                    <van-icon name="add" size="26" color="#0E7CE3" />
-                    <span>新建</span>
-                </div>
+    <Header backgroundBox="white" :show="false">
+        <div class="tools">
+            <van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
+                @clear="handleRefresh" />
+            <div class="right" @click="router.push({ name: 'publish' })">
+                <van-icon name="add" size="26" color="#0E7CE3" />
+                <span>新建</span>
             </div>
-            </Header>
+        </div>
+    </Header>
+    <van-sticky :offset-top="50">
+        <div class="header">
             <!-- <div class="tools">
                 <van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
                     @clear="handleRefresh" />
@@ -48,7 +48,7 @@
                 v-if="dataList.length">
                 <div class="list">
                     <div class="item" v-for="(item, index) in dataList" :key="index"
-                    @click="router.push({ name: 'home-content', params: { id: item.materialId } })">
+                        @click="router.push({ name: 'home-content', params: { id: item.materialId } })">
                         <img :src="fileDomain + item.coverpicture">
                         <div class="desc">
                             <span class="title">
@@ -141,7 +141,7 @@ const getList = () => {
 getList()
 
 const handleRefresh = () => {
-    window.scroll(0,0)
+    window.scroll(0, 0)
     refreshing.value = true
     page.pageNum = 0
     getList()
@@ -199,49 +199,47 @@ const confirmTagsPopup = (e) => {
 </script>
 
 <style lang="scss" scoped>
-.header {
-    padding: 10px;
-    background-color: #ffffff;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
+.tools {
+    display: flex;
+    gap: 10px;
 
-    .tools {
-        display: flex;
-        gap: 10px;
+    :deep(.van-search) {
+        flex: 1;
+        padding: 0;
 
-        :deep(.van-search) {
-            flex: 1;
-            padding: 0;
+        .van-search__content {
+            height: 100%;
 
-            .van-search__content {
+            .van-search__field {
                 height: 100%;
-
-                .van-search__field {
-                    height: 100%;
-                }
             }
         }
+    }
 
-        .right {
-            width: 35px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
+    .right {
+        width: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
 
-            span {
-                font-size: 13px;
-                color: #0E7CE3;
-            }
+        span {
+            font-size: 13px;
+            color: #0E7CE3;
         }
     }
+}
+
+.header {
+    padding: 0 10px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
 
     .menu {
         display: flex;
         justify-content: space-between;
         padding-top: 10px;
 
-
-
         :deep(.van-tabs__nav) {
             gap: 30px;
             padding-bottom: 0;