new first page6 offsetTop报错问题

src/views/Teach.vue

@@ -94,7 +94,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="padding5" id="padding5">
+                <div class="padding5" id="padding5" ref="padding5Top">
                     <h3>优秀学员毕业去向</h3>
                     <ul>
                         <li v-for="(goToArr,index) in goToArrs" :key="index"><img :src="goToArr" alt="优秀学员去向"></li>
@@ -219,26 +219,25 @@ export default {
    mounted () {
         // 事件监听滚动条
       window.addEventListener('scroll', this.watchScroll)
-
   },
   methods: {
     watchScroll () {
-          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-          let padding5Height=document.getElementById('padding5').offsetTop
-          this.padding5Height=padding5Height
-          //  当滚动超过500时，实现吸顶效果
-          if (scrollTop > 580&& scrollTop<=padding5Height) {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        var padding5Tops = this.$refs.padding5Top.offsetTop//padding5离页面顶端的距离
+        this.padding5Height = padding5Tops
+        //  当滚动超过580时，实现吸顶效果
+          if (scrollTop > 580&& padding5Tops>scrollTop) {
             this.navBarFixed = true;
             this.navabs=false;
-          } else if(scrollTop>padding5Height) {
-            this.navBarFixed = false
-            this.navabs=true
-          }else{
+          } else{
             this.navBarFixed = false
-            this.navabs=false;
+            this.navabs=true;
           }
           this.flag=!this.navBarFixed
     }
+  },
+  beforeDestroy(){
+      window.removeEventListener("scroll", this.watchScroll);
   }
 }
 </script>
@@ -326,6 +325,11 @@ export default {
     border-bottom: 2px solid black;
     margin-bottom: 0px;
 }
+
+#right .middle{
+    /* background: #000000; */
+    margin-top: 10px;
+}
 #right .middle img{
     float: left;
     margin-left: 40px;
@@ -592,9 +596,9 @@ display: inline-block;
 
 /*********************content*************************/
 /************************************右边样式********************************************/
-.navBarWrap {
+.navBarWrap{
     position:fixed;
-    top:40px;
+    top:0px;
     z-index: 999;
 }
 @media screen and (max-width: 1440px) {

src/views/global.vue

@@ -7,3 +7,4 @@ export default {
 };
 </script>
 
+