App 仿淘宝：控制详情和购买须知样式切换，控制商品详情和购买须知选项卡的位置（固定在顶部还是正常）

CSS:

<div id="details" ref="details" class="details" :class="tabList ? 'tabTop' : ''">
   <a :class="{'active':leftTab}" @click="changeTab(1, '#goodsDetails')">商品详情</a>
   <a :class="{'active':rightTab}" target="_self" @click="changeTab(0, '#buyNotes')">购买须知</a>
</div>
<div id="goodsDetails" v-html="bodyData.goods.decoration"></div>
<div id="buyNotes" class="buyNotes">
   <p class="notes">购买须知</p>
   <ul>
      <li v-if="bodyData.goods.prompt">
         <p>· {{bodyData.goods.prompt}}</p>
      </li>
   </ul>
</div>

data () {

return {
        tabListTop: '', // 选项卡距顶部距离
        tabList: false, // 整个tab
        leftTab: true, // 详情页tab
        rightTab: false, // 购买须知tab
      }
}
methods: {
      // 监听页面滚动事件
      paperScroll () {
        // 控制商品详情和购买须知选项卡的位置（固定在顶部还是正常）
        if (scroll.scrollTop >= this.tabListTop) {
          this.tabList = true
        } else {
          this.tabList = false
        }
        // 控制详情和购买须知样式切换
        console.log('滑动距离：' + scroll.scrollTop)
        console.log('屏幕高度：' + window.innerHeight)
        console.log('main滚动高度：' + scroll.scrollHeight)
        if (scroll.scrollTop + window.innerHeight < scroll.scrollHeight) {
          this.leftTab = true
          this.rightTab = false
        } else {
          this.leftTab = false
          this.rightTab = true
        }
    }
        /*
      * 详情和购买须知切换
      * */
      changeTab (i, idName) {
        // Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
        // behavior这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程
        document.querySelector(idName).scrollIntoView({behavior: 'smooth'})
        if (i) {
          this.leftTab = true
          this.rightTab = false
        } else {
          this.leftTab = false
          this.rightTab = true
        }
      }
 }    

style:

　　因为页面是滚动的，头部固定不动，内容可以滚动，所以这里记得给头部固定的位置position:

relative

.tabTop {
        position: absolute;
        top: @mainHeight;
        left: 0;
        width: 100%;
        background-color: #ffffff;
      }