Dynamically change class on scroll using VueJs

Question

Dynamically change class on scroll using VueJs

Struggling to add and remove a class from the header on scroll without success. The class is currently being added multiple times with each scroll, resulting in duplication. How can I ensure the class is only added once and removed when ScrollY < 100?

What mistake am I making in my code implementation?

Check out the Codepen here

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid fill-height class="priceContainer">
      <v-layout row wrap align-center justify-center>
        <v-flex xs12 sm12  text-center>
         <v-toolbar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      class="elevation-0 "
      fixed
      temporary
      @scroll="handleSCroll"
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <span class="PriceLogoTitle hidden-sm-and-up">ELS</span>
        <span class="PriceLogoTitle hidden-sm-and-down">ELS</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- Login button -->
      <v-btn  class="navBtnEnter" flat>Enter <v-icon  right >account_box</v-icon></v-btn>
      <!-- End of login button -->
    </v-toolbar>
        </v-flex>   

      </v-layout>
    </v-container>
    </v-content>
  </v-app>
</div>


.priceContainer{
  background-image: radial-gradient( rgb(3, 237, 245),rgb(0, 126, 131));
  height: 1000px;
}
.theme--light.v-toolbar--bgchange {
    background-color: #009D95;
}

new Vue({
  el: '#app',
  methods:{
      handleSCroll (event) {
        let header = document.querySelector(".v-toolbar");
        if (window.scrollY > 100) {
        console.log(window.scrollY);
        header.className += " v-toolbar--bgchange";          
        }
      }
    },
    created () {
      window.addEventListener('scroll', this.handleSCroll);

    },
    destroyed () {
      window.removeEventListener('scroll', this.handleSCroll);
    } 
})

javascript vue.js

Answer 1

Answer №1

ElementName is a customizable string, and it allows for multiple instances of the same class without filtering them out. In contrast, classList.add() will not add duplicates, making it useful in scenarios like replacing:

container.className += " custom-class";

with:

container.classList.add("custom-class");

To remove a class, you can use classList.remove("custom-class").

Answer 2

ElementName is a customizable string, and it allows for multiple instances of the same class without filtering them out. In contrast, classList.add() will not add duplicates, making it useful in scenarios like replacing:

container.className += " custom-class";

with:

container.classList.add("custom-class");

To remove a class, you can use classList.remove("custom-class").

Answer 3

Answer №2

Vue operates reactively, so why manipulate the DOM directly? Let's follow its preferred approach :)

<template lang="pug">
  .main-nav(:class="getMainNavClasses")
    // insert your stylish content here ;)
</template>

<script>
export default {
  name: 'MainMenu',

  data() {
    return {
      scrollingUp: false,
      scrollingDown: false,
      prevScrollpos: window.pageYOffset,
    };
  },

  computed: {
    getMainNavClasses() {
      return {
        'scroll-up': this.scrollingUp,
        'scroll-down': this.scrollingDown,
      };
    },
  },

  methods: {
    scrollNow() {
      const currentScrollPos = window.pageYOffset;

      if (currentScrollPos == 0) {
        this.scrollingUp = false;
        this.scrollingDown = false;
        return;
      }

      if (currentScrollPos < 100) return; // adjust offset as needed

      if (this.prevScrollpos > currentScrollPos) {
        // scrolling up
        this.scrollingDown = false;
        this.scrollingUp = true;
      } else {
        // scrolling down
        this.scrollingUp = false;
        this.scrollingDown = true;
      }

      this.prevScrollpos = currentScrollPos;
    },

    handleScroll() {
      let doScoll;

      window.onscroll = () => {
        clearTimeout(doScoll);
        doScoll = setTimeout(this.scrollNow, 100); // reduce number of scroll events triggered
      };
    },
  },

  created() {
    this.handleScroll();
  },
};
</script>

Answer 4

Vue operates reactively, so why manipulate the DOM directly? Let's follow its preferred approach :)

<template lang="pug">
  .main-nav(:class="getMainNavClasses")
    // insert your stylish content here ;)
</template>

<script>
export default {
  name: 'MainMenu',

  data() {
    return {
      scrollingUp: false,
      scrollingDown: false,
      prevScrollpos: window.pageYOffset,
    };
  },

  computed: {
    getMainNavClasses() {
      return {
        'scroll-up': this.scrollingUp,
        'scroll-down': this.scrollingDown,
      };
    },
  },

  methods: {
    scrollNow() {
      const currentScrollPos = window.pageYOffset;

      if (currentScrollPos == 0) {
        this.scrollingUp = false;
        this.scrollingDown = false;
        return;
      }

      if (currentScrollPos < 100) return; // adjust offset as needed

      if (this.prevScrollpos > currentScrollPos) {
        // scrolling up
        this.scrollingDown = false;
        this.scrollingUp = true;
      } else {
        // scrolling down
        this.scrollingUp = false;
        this.scrollingDown = true;
      }

      this.prevScrollpos = currentScrollPos;
    },

    handleScroll() {
      let doScoll;

      window.onscroll = () => {
        clearTimeout(doScoll);
        doScoll = setTimeout(this.scrollNow, 100); // reduce number of scroll events triggered
      };
    },
  },

  created() {
    this.handleScroll();
  },
};
</script>

Dynamically change class on scroll using VueJs

Answer №1

Answer №2

Similar questions

jQuery Validation is not functioning correctly

Tips for attaching a React hook to a DOM element generated using a jQuery function

Crafting a clever smart banner using jquery.smartbanner for Android Firefox users

An insightful guide on effectively binding form controls in Angular using reactive forms, exploring the nuances of formControlName and ngModel

The positioning of the Kendo UI window is off-center

Setting up isotope using dynamic JSON data

AJAX POST request encountered a 400 Bad Request Error

Adjust the panel size accordingly for smaller screens

Examining the order in which tabs are navigated

Utilize typehead.js in Python Django to retrieve an updated data list directly from the database

Track and monitor data modifications in Vue.js

Browser page caching is a way for web browsers to store copies

Dynamic Wave Effects with jQuery

Using JavaScript, conceal a specific Div by examining the content within another Div

ng-bind-html not functioning properly within my situation

Trouble with displaying PHP and AJAX call after switching from JS fetch

From navigating getElementByID to tackling getElementsByClassName while constructing multiple select elements: a guide

Mongodb error occurred due to a duplicate key in the collection with the key value set

Circular dependencies in ES6 within a React project

Mastering basic DOM manipulation in React with ES6 techniques