VueJS: How to dynamically change a CSS class after a scroll position

Question

I am creating a webapp with vueJs and bootstrap. I want to change CSS class of an element after a particular amount of scroll, Is there some vue way of doing it.

I want something like following:

<div :class="{classA: scrollPosition < 100, classB: scrollPosition > 100}">
</div>

One option I found is by using vue-scroll, which seems promising, but not working.

Is there some other native way as well to achive the same?

jsbin.com/mecekohete/1/edit?html,js,output would something like this work for you ? — Belmin Bedak
– Belmin Bedak, Commented Dec 12, 2016 at 9:06
@BelminBedak This will work if vue does not provide anything out of box, which probably it does not, Please post this as answer. — Saurabh
– Saurabh, Commented Dec 12, 2016 at 9:09

Belmin Bedak · Accepted Answer · 2020-10-12 08:02:03Z

40

You could try to make it like this

const app = new Vue({
  
  el: '#app',
  
  data: {
    scrollPosition: null
  },
  
  methods: {
    updateScroll() {
      this.scrollPosition = window.scrollY
    }
  },
  
  mounted() {
    window.addEventListener('scroll', this.updateScroll);
  }
  
})

You should also consider removing event listener when component is being destroyed, in order to prevent leaks:

destroy() {
  window.removeEventListener('scroll', this.updateScroll)
}

edited Oct 12, 2020 at 8:02

answered Dec 12, 2016 at 9:12

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

1 Comment

Whambulance Over a year ago

I believe destroyed () { ... } is valid for Vue 2, but in Vue 3 this has been replaced with unmounted () { ... }

Collectives™ on Stack Overflow

VueJS: How to dynamically change a CSS class after a scroll position

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related