Question

我正在尝试向滚动标题添加一个类并将其删除。但是失败了。该类在每次滚动时添加。因此，如果ScrollY === 100，则该元素已添加类100次。如何使它仅添加一次，并在scrollY <100时将其删除？

我在做什么错了？

<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>
      <!-- кнопка входа -->
      <v-btn  class="navBtnEnter" flat>Enter <v-icon  right >account_box</v-icon></v-btn>
      <!-- кнопка входа конец -->
    </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);
    } 
})

Answer 1

className是可以任意设置的字符串，并且不会过滤掉重复的类。另一方面，classList.add()会忽略重复的类名，因此您可以替换以下内容：

header.className += " v-toolbar--bgchange";

具有：

header.classList.add("v-toolbar--bgchange");

使用classList.remove("v-toolbar--bgchange")删除班级。

Answer 2

Vue是反应型的，那么为什么要直接更改DOM？让我们按照喜欢的方式进行操作：）

<template lang="pug">
  .main-nav(:class="getMainNavClasses")
    // your fancy stuff goes 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; // set offset here

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

      this.prevScrollpos = currentScrollPos;
    },

    handleScroll() {
      let doScoll;

      window.onscroll = () => {
        clearTimeout(doScoll);
        doScoll = setTimeout(this.scrollNow, 100); // firing less scroll events
      };
    },
  },

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

在VueJ中滚动添加/删除课程

2 个答案: