vue 监听页面滚动 实现元素在页面滚动到一定距离时显示

<template>
  <div id="app">
    <div v-if="nav_show">要显示的元素</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
    	nav_show：false
    };
  },
  methods: {
  	handleScroll() {
  	  // 页面滑动的距离
      let scrollTop = document.documentElement.scrollTop
      // 当页面滑动的距离大于300px时元素显示，否则不显示
      if (scrollTop >= 300) {
        this.nav_show = true
      } else {
        this.nav_show = false
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 组件销毁前
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
};
</script>