获取滚动条距离控制页面样式

<template>

   <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3>    

</template>

<script>

export default {

  data() {

    return {

      translatechange: 'translateX(0%)'

    }

  },

  methods: {

    windowScrollListener() {

      //获取操作元素最顶端到页面顶端的垂直距离

      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop

      if (scrollTop < 2400) {

        this.translatechange = 'translateX(100%)' 

      }

      if (scrollTop >= 2400) {

        this.translatechange = 'translateX(0%)' 

      }

      if (scrollTop > 3000) {

        this.translatechange = 'translateX(100%)' 

      }

console.log(scrollTop);

    }

  },

  created() {

    // 实时监听

    window.addEventListener('scroll', this.windowScrollListener)

  }

}

</script>

<style>

.textChangee {

      transition: all 3s;

      transform: translateX(100%);

    }

</style>