移动端滚动页面 header吸附顶部/固定顶部

实现思路
实际上就是隐藏了一个子组件，等document.scroll滚动高度 与 第二个组件高度相同时(此时两个组件就是重合)，第一个组件就显示出来。而第二个组件依然是在页面上，只是超出了可视区域，看不到而已。

---

父组件

<template>
<div style="height:2000px;width:100%">

    <div style="height:200px;background:orange;"></div>

    <tab-control class="tab-show" ref="tabControl1"  v-show="isTabFixed" :current="currentccc" :titles="titles"  @tabClick="tabClick"/>        

    <tab-control  ref="tabControl2" :current="currentccc" :titles="titles"  @tabClick="tabClick"/>
    
    <div style="height:1000px;width:100%">
        <p>自定义内容</p>
    </div>
    
</div>
</template>
<script>
import tabControl from '../subcomponents/tabControl.vue'
export default {
components:{
    tabControl,
},
data(){
    return{
        tabOffsetTop: 0,
        isTabFixed: true,
        currentccc:0,
        titles:['流行','新款','精选'],
    }
},
created(){
    window.onscroll = this.getXY
},
mounted(){
    this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop;  //该子组件距离顶部的高度
},
methods:{
    //获取滚动距离
    getXY(){        
        var y =   document.documentElement.scrollTop;
        console.log(y);

        if( y > this.tabOffsetTop){   //滚动的高度 > 这个组件的高度
            this.isTabFixed = true;
        }else{
            this.isTabFixed = false;
        }
    },
    tabClick(index){    
        this.currentccc = index;
    },
    
}
}
</script>
<style <style lang="scss" scoped>
.tab-show{
    position: fixed;
    top: 0;
    z-index: 10;
}
</style>

子组件

<template>
<div class="tab-control">
     <div   class="tab-control-item" v-for="(item,index) in titles" :key="index"  
            :class="{active: index == current }" @click="itemClick(index)"
            >

            <span>{{item}}</span>
     </div>
</div>
</template>
<script>
export default {
    name:'tabControl',
    props:{
      current:{
          type:Number,
          default:0
      },
      titles:{
        type:Array,
        default:['流行','新款','精选']
      }
    },
    methods:{
        itemClick(index){
          this.$emit('tabClick',index);
        }
    }
}
</script>
<style lang='scss' scoped>
.tab-control{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;

    .active{
        border-bottom: 4px solid pink;
    }
}
</style>