滑动，实现tab动态切换

html

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
        }
      }
    },