Dynamic CSS class alteration on scrolling using Vue.js

Question

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this for me?

My desired outcome would resemble the code below:

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

I came across a potential solution using vue-scroll, which seemed promising initially but unfortunately is not functioning as expected.

Are there any other built-in methods within Vue that could help me achieve the same result?

html css twitter-bootstrap vue.js

Answer 1

Answer №1

Here is a way to structure your code:

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

It's important to remove the event listener when the component is destroyed to avoid memory leaks:

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

Answer 2

Here is a way to structure your code:

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

It's important to remove the event listener when the component is destroyed to avoid memory leaks:

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

Dynamic CSS class alteration on scrolling using Vue.js

Answer №1

Similar questions

Is it possible to use jQuery to update CSS styles in an AJAX request

Difficulty in making Materialize.css column match the height of the entire row

developing a checkbox group with Vue.js

Chrome is failing to run the keyframe animation transform

Implement the administration sw-media-quickinfo functionality within the Shopware 6 platform

Tips for safeguarding against the insertion of scripts into input fields

Enhancing jQuery Mobile listview with voting buttons on each item row

Acquire HTML table information in array format using JavaScript

The duplication and multiplication of margin-left is occurring

MANDATORY activation of CONFIRMATION

What is the best way to retrieve data input from my select dropdown?

Customizing AngularJS directives by setting CSS classes, including a default option if none are specified

Having difficulties in dynamically swapping audio sources using JavaScript?

The specified CSS background image is not correctly aligned with the dimensions of the selector

Styling menus with CSS

Create a division that will remain visible on the screen and allow scrolling when a certain class is

Website experiencing issues with moderating Facebook comments

The dynamic addition of the active class is malfunctioning

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

Assigning a class to every alternate item