Change the background color with vue.js scroll detection-CodePudding

I already reviewed other forums in Stack Overflow regarding the subject, but comparing codes I really don't know why it doesn't work for me. It detects the position of the scroll makes the change, the change from true to false, but it does nothing.

<template>
  <div id="inicio" >
    <nav
      
      :style="{ background: changeColor ? 'white' : 'black' }"
    >
      <div >
        <router-link to="/">
          <img  alt="Admiga logo" src="../assets/logo_admiga.png" />
        </router-link>
        <div  @click="showMenu = !showMenu">
          <button
            
            @click="menu"
          >
            Menú
          </button>
        </div>
      </div>
      <ul
        :
        
      >
        <li>
          <a
            href="/#inicio"
            
            >Inicio</a
          >
        </li>
        <li>
          <a
            href="/#admiga"
            
            >AdmiGa</a
          >
        </li>
        <li>
          <a
            href="/#funcionalidades"
            
            >Funcionalidades</a
          >
        </li>
        <li>
          <a
            href="/#contactos"
            
            >Contáctanos</a
          >
        </li>
        <li>
          <router-link
            to="/policies"
            
            >Politicas</router-link
          >
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      distanceScrolled: 0,
      changeColor: true,
    }
  },

  mounted() {
    this.detectScroll()
  },

  methods: {
    detectScroll() {
      window.onscroll = function () {
        this.distanceScrolled = document.documentElement.scrollTop
        console.log(this.distanceScrolled)

        if (this.distanceScrolled > 100) {
          this.changeColor = false
        }
      }
    },
  },
}
</script>

CodePudding user response：

Add event listener to your window and assign new data to your data model and update it's value when scroll event is started. see code below

date model

data: {
scrollPosition: null

methods

methods: {
updateScroll() {
   this.scrollPosition = window.scrollY
}

}

mounted hook

 mounted() {
window.addEventListener('scroll', this.updateScroll);

}

CodePudding user response：

this is the correct result

<script >
export default {
  data() {
    return {
      showMenu: false,
      distanceScrolled:0,
      changeColor:true,
      scrollPosition:null,
    };
    
  },

  
  mounted(){
    window.addEventListener('scroll', this.updateScroll);
    
  },

  methods:{
    updateScroll(){
       
      this.scrollPosition = window.scrollY
      if(this.scrollPosition>100){
            this.changeColor = false;
      }
      else{
        this.changeColor = true;
      }
    }
  }
};
</script>