VUE实现吸底

<template>
  <div id="test">
    <ul class="list-box">
      <li v-for="(item, key) in 50" :key="key">
        {{ item }}
      </li>
    </ul>
    <transition name="fade">
      <p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
        吸底按钮
      </p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      headerFixed: false,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.headerFixed = scrollTop > 50
    },
  },
}
</script>

<style lang="scss" scoped="scoped">
#test {
  .list-box {
    padding-bottom: 50px;
  }
  .go {
    background: pink;
    text-align: center;
    line-height: 50px;
    width: 100%;
  }
  .isFixed {
    position: fixed;
    bottom: 0;
  }
  .fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    transition: opacity 0.8s;
  }
  .fade-leave-to {
    opacity: 0;
  }
  .fade-leave-active {
    transition: opacity 0.8s;
  }
}
</style>

效果图：