javascript - Vue.js - 如何在滚动时为我的 div 设置动画

Question

我需要一个由Vue插件加载的div，出现在屏幕上的特定位置，当滚动页面时它会上升，当它达到一定高度时它会停留在那里

这是我的 div 的 css

ul.tui-image-editor-submenu-item {
    position: fixed;
    left: calc(13.6% + 159px);
    top: 235px;
    background: #fff;
    border-radius: 6px;
    padding: 15px 17px!important;
    -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
    box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
}

我希望它固定在该位置，当我滚动页面时，它会向上移动，直到到达 top: 65px;

我知道在 jQuery 中我可以做这样的事情:

$(function(){

    var jElement = $('.element');

    $(window).scroll(function(){
        let altura = 235 - $(this).scrollTop();
        if ( $(this).scrollTop() > 300 ){
            jElement.css({
                'top':'65px'
            });
        }else{
            jElement.css({
                'top':altura
            });
        }
    });

});

Answer 1

您可以使用一个类来使其固定，并像这样切换该类:

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>