滚动后搜索置顶

src/views/Home/personal/components/search.vue

@@ -47,7 +47,7 @@ watch(() => sharedState.layoutClickCount, () => {
 .search {
   height: 50px;
   width: 800px;
-  margin: 20px auto;
+  margin: 0 auto;
   border: 2px solid var(--v-primary-base);
   border-radius: 5px;
   .jobBox {

src/views/Home/personal/index.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <headCarousel></headCarousel>
-    <headSearch v-if="industryTreeData"></headSearch>
+    <div class="stickyBox py-5">
+      <headSearch v-if="industryTreeData"></headSearch>
+    </div>
     <hotJobs></hotJobs>
-    <div class="default-width mt-3">
-      <jobTypeCard class="mb-3" v-if="industryTreeData"></jobTypeCard>
+    <div class="default-width">
+      <jobTypeCard class="mb-5" v-if="industryTreeData"></jobTypeCard>
       <hotPromotedPositions></hotPromotedPositions>
       <PopularEnterprises class="mt-10"></PopularEnterprises>
     </div>
@@ -35,4 +37,10 @@ getTreeData()
 </script>
 
 <style lang="scss" scoped>
+.stickyBox {
+  position: sticky;
+  top: 48px;
+  z-index: 999;
+  background-color: var(--default-bgc);
+}
 </style>