.sticky-box{ 
 position: sticky; 
 position: -webkit-sticky;
 top: 60px; //可通過js動態(tài)設(shè)置
}

//獲取當前元素的offsetTop
  getOffsetTop(obj) {
   let offsetTop = 0;
   while (obj != window.document.body && obj != null) {
    offsetTop += obj.offsetTop;
    obj = obj.offsetParent;
   }
   return offsetTop;
  }

mounted() {
  /**通過給變成固定定位的元素添加一個同等高度的父元素，防止該元素變成固定定位時，脫離文檔流導致的頁面抖動 */
  this.tabsHeight = this.$refs.elTabs.offsetHeight;
  window.addEventListener("scroll", this.handleScroll);
 },
 destroyed() {
  //離開該頁面需要移除這個監(jiān)聽的事件
  window.removeEventListener("scroll", this.handleScroll);
 },
  methods: {
  /**滾動事件 */
  handleScroll() {
    //獲取頁面滾動條的高度
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let offsetTop = this.getOffsetTop(this.$refs.elTabs);
    this.isFixed = scrollTop > offsetTop;
  }
 }

/**滾動事件 */
  handleScroll() {
   /**
    * getBoundingClientRect().top 獲取某元素距離瀏覽器頂部的高度，不包含滾動的距離
    this.offsetTop 表示的是吸頂元素距離頂部的條件值（一般項目需求是0）
    */
   let tabOffsetTop = this.$refs.stickyBox.getBoundingClientRect().top;
   this.isFixed = tabOffsetTop < this.offsetTop
  }

<a href="#view1">按鈕1</a> 
 <a href="#view2">按鈕1</a> 
 <div id="view1">視圖1</div> 
 <div><a name="view2">視圖2</a></div> 

<!-- html -->
 <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
  <el-tab-pane :label="item.name" :name="item.key" v-for="item in tabList" :key="item.key"></el-tab-pane>
</el-tabs>
<!-- js -->
methods:{
 //獲取當前元素的offsetTop
 getOffsetTop(obj) {
  let offsetTop = 0;
  while (obj != window.document.body && obj != null) {
  offsetTop += obj.offsetTop;
  obj = obj.offsetParent;
 }
  return offsetTop;
 },
 <!--錨點點擊事件-->
 <!--fixedHeight 滾動的位置上方固定的高度-->
 tabClick(e) {
  let _this = this;
  //獲取當前選中的index以便后面滾動高亮
  this.index = parseInt(e.index);
  //給定一個標識，錨點事件不觸發(fā)滾動
  this.isScroll = false;
  this.isChange = false;
  //獲取當前選中元素的top值（給元素綁定對應(yīng)的ref值）
  let offsetTop = this.getOffsetTop(this.$refs[this.activeName]);
  let scrollTop = offsetTop - this.fixedHeight;
  window.scrollTo({
    top: scrollTop
  });
}

//頁面滾動要做的事情
handleScroll() {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
   this.scrollTop = scrollTop;
   <!--isScroll 用于避免錨點事件觸發(fā)頁面滾動-->
   if (!this.isScroll) return;
   /**
    * scrollTop 頁面的滾動條的高度
    * offsetTop 當前選中的tab元素的offsetTop
    * offsetHeight 當前選中元素的高度
    */
   let offsetTop = this.getOffsetTop(this.$refs[this.activeName]);
   let offsetHeight = this.$refs[this.activeName].offsetHeight;
   let actuaTop = scrollTop + this.fixedHeight;
   let length = this.tabList.length;
   /**
    * 頁面滾動中根據(jù)相應(yīng)位置變換選中tab
    */
   if (actuaTop < offsetTop && this.index > 0) {
    this.index = this.index - 1;
    this.activeName = this.tabList[this.index].key;
   } else if (this.index < length && actuaTop > offsetTop + offsetHeight) {
    this.index = this.index + 1;
    this.activeName = this.tabList[this.index].key;
 }
}