首先看一下实现效果图,刚进页面的,是有一个头部:
当页面往下滑,tab的标签页就需要固定在头部,效果图如下:
看一下实现的代码:
<template>
<div>
<div class="top-header">这是头部</div>
<div id="boxFixed" :class="{ is_fixed: isFixed }">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="自身风险" name="自身风险">
<span slot="label" class="f16">自身风险</span>
</el-tab-pane>
<el-tab-pane label="周边风险" name="周边风险">
<span slot="label" class="f16">周边风险</span>
</el-tab-pane>
<el-tab-pane label="变更风险" name="变更风险">
<span slot="label" class="f16">变更风险</span>
</el-tab-pane>
<el-tab-pane label="经营风险" name="经营风险">
<span slot="label" class="f16">经营风险</span>
</el-tab-pane>
<el-tab-pane label="历史风险" name="历史风险">
<span slot="label" class="f16">历史风险</span>
</el-tab-pane>
<el-tab-pane label="预警提醒" name="预警提醒">
<span slot="label" class="f16">预警提醒</span>
</el-tab-pane>
</el-tabs>
</div>
<div class="container">
<div v-for="item in 100" :key="item" class="item">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeName: '自身风险',
isFixed: false,
offsetTop: 0,
}
},
created() {},
mounted() {
//监听滚动
window.addEventListener('scroll', this.initHeight)
//执行下一步
this.$nextTick(() => {
this.offsetTop = document.querySelector('#boxFixed').offsetTop //吸顶距离顶部的距离
})
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll) //在销毁的生命周期取消监听事件,提高性能
},
methods: {
initHeight() {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop //计算滚动条距离顶部的距离
this.isFixed = scrollTop > this.offsetTop ? true : false//当滚动条大于吸顶距离顶部的距离试,就加上css样式
},
//tab切换
handleClick() {},
},
}
</script>
<style lang="scss" scoped>
::v-deep {
.el-tabs--card > .el-tabs__header .el-tabs__nav {
display: flex;
width: 100%;
background-color: rgb(223, 231, 235);
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-left: none !important;
}
.el-tabs__item {
flex: 1;
text-align: center;
font-weight: 400;
color: #596078;
height: 46px;
}
.el-tabs__item.is-active {
background: #e6f2ff;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #2991ff;
}
.el-tabs__header {
margin: 0;
border-color: #fafafa;
}
}
.top-header{
width: 100%;
height: 100px;
background-color: #eae;
color: #fff;
text-align: center;
line-height: 100px;
}
.container {
width: 100%;
line-height: 40px;
.item{
text-indent: 130px;
}
}
.is_fixed {
position: fixed;
top: 90px;
z-index: 999;
background-color: #fafafa;
width: 100%;
}
</style>
完结!