首页导航条问题

components/home/floor/FloorBar.vue

@@ -22,35 +22,66 @@
     data () {
       return {
         visible: false,
-        activeFloor: -1,
+        activeFloor: 0,
         floor_scrollTop: 777
       }
     },
     methods: {
+      _calcaulateHeight() {
+        this.bannerHeight = document.querySelectorAll('.normal-floor')[0].offsetTop
+        this.listHeight = []
+        this.list = document.querySelectorAll('.normal-floor')
+        let height = 0
+        this.listHeight.push(height)
+        for (let i = 0; i < this.list.length; i++) {
+          const item = this.list[i]
+          if (i === 0) {
+            height += item.offsetTop + item.clientHeight / 2
+          } else {
+            height += item.clientHeight
+          }
+          this.listHeight.push(height)
+        }
+      },
       onScroll () {
         if (window.location.pathname === '/') {
           let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-          let floors = document.querySelectorAll('.normal-floor')
-          let barOffset = document.querySelector('.floor-bar').offsetTop
-          if (floors[0].offsetTop === 0) {
-            this.visible = scrolled >= floors[0].offsetTop + this.floor_scrollTop - barOffset && scrolled <= floors[floors.length - 1].offsetTop + floors[floors.length - 1].offsetHeight - barOffset - document.querySelector('.floor-bar').offsetHeight + this.floor_scrollTop
-            if (this.visible) {
-              for (let i = 0; i < floors.length; i++) {
-                if (barOffset >= floors[i].offsetTop + this.floor_scrollTop - scrolled + 20) {
-                  this.activeFloor = i
-                }
-              }
-            }
-          } else {
-            this.visible = scrolled >= floors[0].offsetTop - barOffset + 40 && scrolled <= floors[floors.length - 1].offsetTop + floors[floors.length - 1].offsetHeight - barOffset - document.querySelector('.floor-bar').offsetHeight
-            if (this.visible) {
-              for (let i = 0; i < floors.length; i++) {
-                if (barOffset >= floors[i].offsetTop - scrolled + 20) {
-                  this.activeFloor = i
-                }
-              }
-            }
+          this.visible = scrolled >= this.bannerHeight - window.innerHeight / 2 + 220
+          let _scrollHeight = scrolled
+          const listHeight = this.listHeight
+          for (let i = 0; i < listHeight.length; i++) {
+            let height1 = listHeight[i]
+            // let height2 = listHeight[i + 1]
+            console.log(height1, _scrollHeight)
+            if (_scrollHeight >= height1) this.activeFloor = i
+            // if (_scrollHeight >= height1 && _scrollHeight < height2) {
+            //   this.activeFloor = i
+            // }
+          }
+          if (_scrollHeight > listHeight[listHeight.length - 1]) {
+            this.visible = false
           }
+          // let floors = document.querySelectorAll('.normal-floor')
+          // let barOffset = document.querySelector('.floor-bar').offsetTop
+          // if (floors[0].offsetTop === 0) {
+          // this.visible = scrolled >= floors[0].offsetTop + this.floor_scrollTop - barOffset && scrolled <= floors[floors.length - 1].offsetTop + floors[floors.length - 1].offsetHeight - barOffset - document.querySelector('.floor-bar').offsetHeight + this.floor_scrollTop
+          // if (this.visible) {
+          //   for (let i = 0; i < floors.length; i++) {
+          //     if (barOffset >= floors[i].offsetTop + this.floor_scrollTop - scrolled + 20) {
+          //       this.activeFloor = i
+          //     }
+          //   }
+          // }
+          // } else {
+          //   this.visible = scrolled >= floors[0].offsetTop - barOffset + 40 && scrolled <= floors[floors.length - 1].offsetTop + floors[floors.length - 1].offsetHeight - barOffset - document.querySelector('.floor-bar').offsetHeight
+          //   if (this.visible) {
+          //     for (let i = 0; i < floors.length; i++) {
+          //       if (barOffset >= floors[i].offsetTop - scrolled + 20) {
+          //         this.activeFloor = i
+          //       }
+          //     }
+          //   }
+          // }
         }
       },
       jumpFloor (index) {
@@ -61,6 +92,7 @@
     },
     mounted: function () {
       this.$nextTick(function () {
+        this._calcaulateHeight()
         window.addEventListener('scroll', this.onScroll)
       })
     }