CODEWITHSUNDEEP
javascriptjqueryvue.js
Marcius Leandro
Marcius Leandro

Reputation: 789

Vue.js - how to animate my div when scrolling

I need a div that is loaded by a Vue plugin, appears in a specific position on the screen, and when scrolling the page it goes up and when it reaches a certain height it stays there

this is my div's 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);
}

I want it to appear fixed in that position, and as I scroll the page it will go up until I reach top: 65px;

I know that in jQuery I could do something like this:

$(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
            });
        }
    });

});

Upvotes: 0

Views: 1860

Answers (1)

blex
blex

Reputation: 25634

You can use a class to make it fixed, and toggle this class like this:

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>

Upvotes: 2

Related Questions