<template>
 <div class="container">
    <div class="wrapper" style="margin-left: 125px;">
                      <div class="section" style="width:100%"
                          v-for="(item, index) in list" :key="index">
                          <div style="width:100%;height:100%;font-size:14px;font-weight:bold;color:#fff;"
                              :style="{'background':item.backgroundcolor}">
                              <p style="font-size:18px;font-weight:bold;">{{item.name}}</p>
                              <div>{{item.text}}</div>
                          </div>
                      </div>
                  </div>
                  <nav style="position:fixed;left:30px;top:350px;">
                      <el-tabs @tab-click="handleClick" v-model="activeName"
                          :tab-position="tabPosition" style="height: 200px;">

                          <el-tab-pane :name="'tab'+index" :class="index==0?'current':''"
                              v-for="(item, index) in list" :key="index" :label="item.name">
                          </el-tab-pane>
                      </el-tabs>
                  </nav>
              </div>
              </template>
              <script>
  export default {
    data(){
      return {
        activeName:'tab0',
        tabPosition:'right',
        scroll: '',
        list: [{
        name: "第一條",
        backgroundcolor: "#90B2A3"
        }, {
        name: "第二條",
        backgroundcolor: "#A593B2"
        }, {
        name: "第三條",
        backgroundcolor: "#A7B293"
        }, {
        name: "第四條",
        backgroundcolor: "#0F2798"
        }, {
        name: "第五條",
        backgroundcolor: "#0A464D"
        }],
        navList: [1, 2, 3, 4, 5]
      }
    },
    methods: {
    //這里傳入的tab相當(dāng)于item
      handleClick(tab,event){
        console.log(tab.index)
        this.jump(tab.index)
      },
      dataScroll: function () {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      },
      jump(index) {
        let jump = document.getElementsByClassName('section');
        // 獲取需要滾動(dòng)的距離
        let total = jump[index].offsetTop;
        // Chrome
        document.body.scrollTop = total;
        // Firefox
        document.documentElement.scrollTop = total;
        // Safari
        window.pageYOffset = total;
        // $('html, body').animate({
        // 'scrollTop': total
        // }, 400);
      },
      // 用循環(huán)的方式將每個(gè)標(biāo)題離頂部的距離與滾動(dòng)條當(dāng)前位置對(duì)比來(lái)確定哪個(gè)標(biāo)題需要變?yōu)楦吡?      loadScroll: function () {
        var self = this;
        var sections = document.getElementsByClassName('section');
        for (var i = sections.length - 1; i >= 0; i--) {
          if (self.scroll >= sections[i].offsetTop - 100) {
          //我在上面規(guī)定了每個(gè)el-tab-pane標(biāo)簽的name屬性值為tab+該標(biāo)簽的index值
            self.activeName = 'tab'+i
            break;
          }
        }
      }
    },
    watch: {
    //監(jiān)聽scroll變量，只要滾動(dòng)條位置變化就會(huì)執(zhí)行方法loadScroll
      scroll: function () {
      
        this.loadScroll()
      }
    },
    mounted() {
      // scroll代表滾動(dòng)條距離頁(yè)面頂部距離
      window.addEventListener('scroll', this.dataScroll);
    }
  }
</script>
<style lang="scss" scoped>
  * {
  padding: 0;
  margin: 0;
  }
  .nav1 {
    display: block;
    width: 120px;
    height: 40px;
    text-align: left;
    line-height: 40px;
    color: #fff;
    /* background: #eee; */
    margin: 10px 0;
    cursor: pointer;
    padding-left: 18px;
      &:hover{
        color: #0177ff;
      }

  }
  .current {
    color: #0578fc !important;
    cursor: pointer;
  }
  nav{
    // border-left: 1px solid #eee;
    a{
      border-left: 3px solid #0177ff;
    }
  }
  
</style>
<style>
  .el-tabs__header.is-right{
     margin-right: 100px !important;
  }
</style>