vue简单实现吸顶效果pc

首先看一下实现效果图,刚进页面的,是有一个头部:

 当页面往下滑,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.initHeight) //在销毁的生命周期取消监听事件,提高性能
    },
    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>

完结!