html

<div class="headmm"  id="head2">

js

//獲取head2元素的高度

head2hei:function () {

      return document.getElementById('head2').offsetHeight;

    }

//點選導航後控制滾動條移動的位置

 changeFirstNav: function (data) {
      var idheight = document.getElementById(data).offsetTop
      let len = this.head2hei
      if(!this.firstNavShowTop ){
        len= len +parseInt(this.head2hei)
      };
      document.documentElement.scrollTop = document.body.scrollTop = idheight - len
      // this.firstNavShowTop = true
//    document.getElementById(data).scrollIntoView(true)
      this.pageSlideControl(this.head2hei )

    },

    //根據滾動條跟頂部到某元素的距比較現實導航動態切換
    pageSlideControl: function (data) {
      let that = this
      window.onscroll = function () {
        let banner = document.getElementById('banner').offsetTop
        let afterServerSection = document.getElementById('afterServerSection').offsetTop
        let problemSection = document.getElementById('problemSection').offsetTop
        let t = document.documentElement.scrollTop  || document.body.scrollTop
       if(data){
          t = t + parseInt(data)
       }
       let t2= t
       if(!that.firstNavShowTop){
         t2 = t2 + parseInt(data)
       }
        // 第二層導航滑動在可視窗口裡面，則固定在最上面
        if ( banner < 0 || t < banner) {
          that.firstNavShowTop = false
        } else {
          that.firstNavShowTop = true
        }


        // 控制滑塊的地址 詳情
        if (afterServerSection > t2) {
          that.firstNavList.productDetailSection = true
        } else {
          that.firstNavList.productDetailSection = false
        }
        // 控制滑塊的地址 售後
        if (afterServerSection <= t2  && t2 < problemSection) {
          that.firstNavList.afterServerSection = true
        } else {
          that.firstNavList.afterServerSection = false
        }
        // 控制滑塊的地址 常見問題
        if (t2  >= problemSection) {
          that.firstNavList.problemSection = true
        } else {
          that.firstNavList.problemSection = false
        }
      }
    },