优化

Author: konglingwen94

src/App.vue

@@ -117,4 +117,9 @@ export default {
 footer {
   margin-top: 100px;
 }
+
+#app,
+main {
+  position: relative;
+}
 </style>

src/components/header.vue

@@ -107,11 +107,11 @@ export default {
   height: 60px;
   align-items: center;
   padding: 10px 100px;
-  position: relative;
+  // position: relative;
   z-index: 1000;
   &.fixedToTop {
     position: fixed;
-     
+
     width: 100%;
   }
   &.main-color {

src/helper/utilities.js

@@ -57,3 +57,12 @@ export function formatDate(date, format = true) {
 
   return format ? `${Y}-${M}-${d} ${h}:${m}:${s}` : `${Y}-${M}-${d}`;
 }
+
+export function getOffsetTop(relativeNode, node, topSum = 0) {
+  topSum += node.offsetTop;
+   
+  if (node.offsetParent !== relativeNode) {
+    return getOffsetTop(relativeNode, node.offsetParent, topSum);
+  }
+  return topSum;
+}

src/views/Jobs.vue

@@ -4,7 +4,11 @@
 
     <!-- 搜索 -->
     <div ref="searchBar" :class="{ fixedTop: searchBarFixedTop }" class="search-wrapper">
-      <input-search placeholder="搜索职位" v-model="searchKeyword"></input-search>
+      <input-search
+        :size="searchBarFixedTop?'small':'medium'"
+        placeholder="搜索职位"
+        v-model="searchKeyword"
+      ></input-search>
     </div>
 
     <div class="main clearfix">
@@ -61,6 +65,7 @@
   </div>
 </template>
 <script>
+import { getOffsetTop } from "@/helper/utilities";
 let positionY = 0;
 let searchBarClientHeight = 0;
 
@@ -106,13 +111,13 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      positionY = this.$refs.searchBar.offsetTop;
+      positionY = getOffsetTop(document.body, this.$refs.searchBar);
       searchBarClientHeight = this.$refs.searchBar.clientHeight;
+
     });
   },
   activated() {
     const onPageScroll = () => {
-      
       const top = this.$refs.searchBar.getBoundingClientRect().top;
 
       this.searchBarFixedTop =