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

实现思路

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

父组件

自定义内容

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;

},

}

}

.tab-show{

position: fixed;

top: 0;

z-index: 10;

}

子组件

:class="{active: index == current }" @click="itemClick(index)"

>

{{item}}

export default {

name:'tabControl',

props:{

current:{

type:Number,

default:0

},

titles:{

type:Array,

default:['流行','新款','精选']

}

},

methods:{

itemClick(index){

this.$emit('tabClick',index);

}

}

}

.tab-control{

width: 100%;

height: 40px;

line-height: 40px;

background-color: #fff;

display: flex;

justify-content: space-around;

.active{

border-bottom: 4px solid pink;

}

}