How to convert JQuery to Vue.js Script

Question

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?

gre_gor · Accepted Answer · 2022-01-12 18:12:39Z

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>

edited Jan 12, 2022 at 18:12

answered Jan 11, 2022 at 22:44

gre_gor

6,65812 gold badges104 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony19 Over a year ago

The scroll-handler should be cached, so that it could be removed on unmount to avoid a memory leak.

Collectives™ on Stack Overflow

How to convert JQuery to Vue.js Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related