vue监听页面滚动后右下角出现返回顶部按钮

滚动到一定页面后el-table标题吸顶效果

将内容设为公共组件，在使用的页面引用即可。

<template>
  <transition name="fade">
    <div
      v-show="btnFlag"
      :style="customStyle"
      class="back-to-ceiling"
      @click="backTop"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 17 17"
        xmlns="http://www.w3.org/2000/svg"
        class="Icon Icon--backToTopArrow"
        aria-hidden="true"
        style="height: 16px; width: 16px"
      >
        <g>
          <path
            d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"
            fill-rule="evenodd"
          />
        </g>
      </svg>
    </div>
  </transition>
</template>
 
<script>
export default {
  name: "BackTop",
  data() {
    return {
      btnFlag: false,
      scrollTop: "",
      customStyle: {
        right: "50px",
        bottom: "50px",
        width: "40px",
        height: "40px",
        "border-radius": "4px",
        "line-height": "45px",
        background: "#e7eaf1",
      },
    };
  },

  // vue的两个生命钩子，这里不多解释。
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
  mounted() {
    window.addEventListener("scroll", this.scrollToTop, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop, true);
  },

  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      let that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.getElementById("backTop").scrollTop = that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },

    // 为了计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏
    scrollToTop() {
      let that = this;
      let scrollTop = document.getElementById("backTop").scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 250) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
      //滚动后table表头吸顶效果
      let elTable = this.$parent.$refs.tablePage.$refs.elTable.$el;
      let tableTop = elTable.offsetTop;
      if (scrollTop >= tableTop) {
        //表头到达页面顶部固定表头
        // console.log('固定')
        let top = scrollTop - (tableTop + 1);
        this.$nextTick(() => {
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.position = "relative";
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.zIndex = "500";
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.top = `${top}px`;
        });
      } else if (scrollTop == 0) {
        //表格横向
        // console.log('横拉')
        this.$nextTick(() => {
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.position = "relative";
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.zIndex = "500";
        });
      } else {
        this.$nextTick(() => {
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.position = "";
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.zIndex = "";
          elTable.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.top = "";
        });
      }
    },
  },
};
</script>
<style scoped>
.back-to-ceiling {
  position: fixed;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  z-index: 9999;
}
.back-to-ceiling:hover {
  background-color: #409eff !important;
}

.back-to-ceiling:hover .icon-back-to-top {
  fill: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>