How to convert JQuery to Vue.js Script

user_13847102 0
Viewed 334

I'm trying to add class name dynamically. That class is changing display of navbar when scroll offset greater than 50.

This is jQuery code (jQuery to collapse the navbar on scroll):

  $(window).scroll(function() {
    if ($(".navbar-default").offset().top > 50) {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
      $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
  });

This is what I tried:

<script>
export default {
  data() {
    return {
      isSticky: false,
      stickyClass: "top-nav-collapse",
    };
  },
  methods: {
    handleScroll(e) {
      e.prevent();
      if (window.scrollY > 50) {
        this.isSticky = true;
        console.log("deneme");
      } else {
        this.isSticky = false;
      }
    },
  },
  mounted() {
    this.handleScroll();
  },
};
</script>

How can I convert this code?

vue.js jquery javascript
1 Answers

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>
user_7947490
Related