Vue. js - как оживить мой div при прокрутке

Question

Мне нужен div, который загружается плагином Vue, появляется в определенной позиции c на экране, и при прокрутке страницы он поднимается, а когда достигает определенной высоты, остается там

это мой 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);
}

Я хочу, чтобы он выглядел фиксированным в этой позиции, и при прокрутке страницы он будет go вверх, пока я не достигну 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

Вы можете использовать класс, чтобы сделать его fixed, и переключать этот класс следующим образом:

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>