How to translate this jQuery syntax into Vue?

Question

JavaScript

How to translate this jQuery syntax into Vue?

$(window).on("scroll", function () {
    var scrolled = $(this).scrollTop();
    if( scrolled > 107 ) {
        $('.content').addClass('scrolled');
    }   
    if( scrolled <= 107 ) {     
        $('.content').removeClass('scrolled');
    }
});

Answer 1

Let's add a property to the component that will contain the current scroll value:

data: () => ({
  scroll: 0,
  ...
}),

To keep the value up-to-date, we will update it when the corresponding event occurs:

created() {
  window.addEventListener('scroll', () => this.scroll = window.scrollY);
},

Let's make a computed property that will represent the classes assigned to the element depending on the current scroll value:

computed: {
  scrollClasses() {
    return что-то, в зависимости от значения this.scroll;
  },
  ...
},

<div :class="scrollClasses"></div>
https://jsfiddle.net/o1hjb79u/