问Vue.js -如何在滚动时设置div动画

EN

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      isScrollOver65: false
    }
  },
  mounted() {
    // Setup the event listener and execute it once in case we are already scrolled
    window.addEventListener('scroll', this.scrollHandler);
    this.scrollHandler();
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollHandler);
  },
  methods: {
    scrollHandler(e) {
      this.isScrollOver65 = window.pageYOffset > 65;
    }
  }
});

var vm = new Vue({
  el: '#app'
});

/* Just for the demo */
body { font-family: Arial, Helvetica, sans-serif; } p { font-size: 25px; width: 60%; } ul { background: #f00; color: #fff; list-style: none; padding: 30px; right: 20px; }

ul.tui-image-editor-submenu-item {
  position: absolute;
  top: 90px;
}

ul.tui-image-editor-submenu-item.fixed {
  position: fixed;
  /* Original position minus scroll limit */
  top: calc(90px - 65px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
    <my-component></my-component>
</div>

<template id="my-component">
   <ul class="tui-image-editor-submenu-item" :class="{fixed: isScrollOver65}">
     <li>Demo</li>
   </ul>
</template>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet, enim non vulputate commodo, lorem tortor blandit sapien, nec euismod erat ligula porttitor ante. Ut tincidunt consequat sapien, et sodales neque varius eu.</p><p>Vestibulum luctus, enim in facilisis pharetra, lectus est vehicula leo, quis faucibus erat felis ut nulla. Nunc vel tellus et purus aliquam rhoncus.</p><p>Phasellus a cursus metus, at lacinia orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia sit amet turpis nec ullamcorper.</p><p>Vivamus eu felis quis velit vehicula porta. Suspendisse tristique ante eros, ac porta elit fringilla id. Suspendisse congue ullamcorper nulla ac commodo.</p><p>Suspendisse volutpat, mi eget convallis tempor, lacus arcu ornare erat, nec euismod augue elit iaculis quam. Curabitur eget ligula diam.</p><p>Donec elit ex, pharetra sit amet mi nec, pulvinar scelerisque diam. Pellentesque nec consectetur erat. Pellentesque purus turpis, molestie quis turpis nec, sagittis aliquam tortor. Donec sodales mi semper nisi sodales consectetur.</p><p>Donec accumsan tellus at finibus molestie. Ut blandit magna at leo euismod vestibulum. Aliquam non ipsum vel magna vestibulum accumsan nec a ligula.</p><p>Pellentesque mattis non sem luctus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna pretium tortor suscipit porta. Nam magna arcu, congue nec turpis sit amet, pulvinar tempus diam.</p>