How to convert JQuery to Vue.js Script

Solution 1:

Add the scroll event handler in the mounted() function and change the isSticky variable there.

export default {
  data: () => ({
    isSticky: false,
  }),
  mounted() {
    this.scroll_event_handler = () => {
      this.isSticky = window.scrollY > 50;
    }
    window.addEventListener("scroll", this.scroll_event_handler);
  },
  unmounted() {
    window.removeEventListener("scroll", this.scroll_event_handler);
  },
}

Then in your template you can add/remove the class like this:

<nav class="navbar-fixed-top" :class="{'top-nav-collapse': isSticky}">
    ...
</nav>