解决定位问题

src/views/merge-detail.vue

@@ -144,6 +144,10 @@ import { mapGetters, mapActions } from "vuex";
 import vueFilters from "@/utils/filter";
 import { Toast  } from 'vant';
 
+let cataOffsetTop = 0;
+let intorOffsetTop = 0;
+let titleOffsetHeight = 50;
+
 export default {
   data() {
     return {
@@ -363,53 +367,6 @@ export default {
       });
     },
 
-    scrollFun() {
-      let scrollTop =
-        document.body.scrollTop || document.documentElement.scrollTop;
-        let h;
-      const catalogue = document.getElementById("catalogue-content");
-      const intro = document.getElementById("intro-content");
-
-
-      console.log(`scrollTop intor.offsetTop catalogue.offsetTop`, scrollTop, intro.offsetTop, catalogue.offsetTop);
-      // console.log(`catalogue.offsetHeight catalogue.offsetHeight`, catalogue.offsetTop, catalogue.offsetTop);
-
-
-      // const h = catalogue.offsetTop - 600;
-      // 显示头部导航
-      if (scrollTop > 20) {
-        this.isBlack = true;
-        this.bgColor = "#fff";
-      } else {
-        this.isBlack = false;
-        this.bgColor = "none";
-      }
-
-      // 如果滚动高度大于简介头部（并减去tab高度），则进行固定
-      if(scrollTop > intro.offsetTop - 60) {
-        this.fixedFlag = true;
-      } else {
-        this.fixedFlag = false;
-      }
-      // 如果如果滚动高度大于
-      if(scrollTop > catalogue.offsetTop - 600) {
-        this.tabFlag = false;
-      } else {
-        this.tabFlag = true;
-      }
-
-      // this.fixedFlag = scrollTop > 300 ? true : false;
-      // 中华医学会项目
-      // if(this.project.cmeType == 2) {
-      //   h = catalogue.offsetTop - 520;
-      //   this.fixedFlag = scrollTop > 280 ? true : false;
-      // } else {
-      //   h = catalogue.offsetTop - 600;
-      //   this.fixedFlag = scrollTop > 420 ? true : false;
-      // }
-      // this.tabFlag = scrollTop > h ? false : true;
-    },
-
     // token是否失效校验
     checkToken() {
       let _this = this;
@@ -495,18 +452,56 @@ export default {
     handlerAction(data) {
       this.isShowDialog = false;
     },
+    scrollFun() {
+      let scrollTop =
+        document.body.scrollTop || document.documentElement.scrollTop;
+        let h;
+        console.log(`scrollFun scrollTop intorOffsetTop cataOffsetTop`, scrollTop, intorOffsetTop, cataOffsetTop);
+
+      // 显示头部导航
+      if (scrollTop > 20) {
+        this.isBlack = true;
+        this.bgColor = "#fff";
+      } else {
+        this.isBlack = false;
+        this.bgColor = "none";
+      }
+
+      // 如果滚动高度大于简介头部（并减去tab高度），则进行固定
+      if(scrollTop > intorOffsetTop - 75) {
+        this.fixedFlag = true;
+      } else {
+        this.fixedFlag = false;
+      }
+      // 如果滚动高度大于
+      if(scrollTop > cataOffsetTop - 600) {
+        this.tabFlag = false;
+      } else {
+        this.tabFlag = true;
+      }
+
+      // this.fixedFlag = scrollTop > 300 ? true : false;
+      // 中华医学会项目
+      // if(this.project.cmeType == 2) {
+      //   h = cataOffsetTop - 520;
+      //   this.fixedFlag = scrollTop > 280 ? true : false;
+      // } else {
+      //   h = cataOffsetTop - 600;
+      //   this.fixedFlag = scrollTop > 420 ? true : false;
+      // }
+      // this.tabFlag = scrollTop > h ? false : true;
+    },
 
     // 锚点到简介
     jumpIntro() {
       this.tabFlag = true;
       this.fixedFlag = true;
-      const intro = document.getElementById("intro-content");
-      const title = document.getElementById("content-title");
+      console.log(`jumpIntro cataOffsetTop intorOffsetTop`, cataOffsetTop, intorOffsetTop);
       let h;
       if (this.isWeb) {
-        h = intro.offsetTop - title.offsetHeight;
+        h = intorOffsetTop - titleOffsetHeight;
       } else {
-        h = intro.offsetTop - 85 - title.offsetHeight;
+        h = intorOffsetTop - 85 - titleOffsetHeight;
       }
       window.scrollTo(0, h);
       this.isBlack = true;
@@ -515,19 +510,17 @@ export default {
         component_tag: `211#211007#${this.projectId}`
       });
     },
+
     // 锚点到目录
     jumpCatalogue() {
       this.tabFlag = false;
       this.fixedFlag = true;
-      const catalogue = document.getElementById("catalogue-content");
-      const title = document.getElementById("content-title");
-      console.log(`catalogue.offsetTop title.offsetTop`, catalogue.offsetTop, title.offsetTop);
-      console.log(`catalogue.offsetHeight title.offsetHeight`, catalogue.offsetHeight, title.offsetHeight);
+      console.log(`jumpCatalogue cataOffsetTop intorOffsetTop`, cataOffsetTop, intorOffsetTop);
       let h;
       if (this.isWeb) {
-        h = catalogue.offsetTop - title.offsetHeight;
+        h = cataOffsetTop - titleOffsetHeight;
       } else {
-        h = catalogue.offsetTop - 75 - title.offsetHeight;
+        h = cataOffsetTop - 75 - titleOffsetHeight;
       }
       window.scrollTo(0, h);
       this.isBlack = true;
@@ -536,6 +529,7 @@ export default {
         component_tag: `211#211008#${this.projectId}`
       });
     },
+
     // 获取项目详情
     getProjectParticularsV2() {
       let _this = this;
@@ -596,12 +590,18 @@ export default {
             });
           }
 
-          // 直接跳转
-          if(_this.project.jumpToContents) {
-            setTimeout(() => {
-              this.jumpCatalogue();
-            }, 200);
-          }          
+          setTimeout( () => {
+              cataOffsetTop = document.getElementById("catalogue-content").offsetTop;
+              intorOffsetTop = document.getElementById("intro-content").offsetTop;
+              console.log('getProjectParticularsV2', cataOffsetTop, intorOffsetTop);
+              // 直接跳转
+              if(_this.project.jumpToContents) {
+                setTimeout(() => {
+                  this.jumpCatalogue();
+                }, 200);
+              }
+          }, 200);
+          
         }
         //_this.showLoading = false;
       });