<template>
  <div class="back-btn-position-fx-style">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Affix',
  props: {
  },
  data() {
    return {
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll(e) {
      if (document.documentElement.scrollHeight - document.documentElement.scrollTop <= document.documentElement.clientHeight + 317) {
        const fxDom = document.getElementsByClassName('back-btn-position-fx-style')
        if (fxDom.length > 0) {
          fxDom[0].classList.add('back-btn-position-ab-style')
          fxDom[0].classList.remove('back-btn-position-fx-style')
        }
      } else {
        const adDom = document.getElementsByClassName('back-btn-position-ab-style')
        if (adDom.length > 0) {
          adDom[0].classList.add('back-btn-position-fx-style')
          adDom[0].classList.remove('back-btn-position-ab-style')
        }
      }
    }
  }
}
</script>

<style scoped>
.back-btn-position-ab-style {
  position: absolute;
  top: 60px;
  /* margin-left: 1074px; */
}
.back-btn-position-fx-style {
  position: fixed;
  top: 60px;
  background: #fff;
  /* margin-left: 1074px; */
}
</style>
