Change the background color with vue.js scroll detection

Question

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" class="change_color">
    <nav
      class="2xl:py-20 fixed justify-around lg:flex py-4 sm:py-8 w-full z-50 change_color"
      :style="{ background: changeColor ? 'white' : 'black' }"
    >
      <div class="flex items-center justify-between lg:justify-around md:mx-8 mx-4 z-50">
        <router-link to="/">
          <img class="h-12 md:h-20 md:w-20 w-12" alt="Admiga logo" src="../assets/logo_admiga.png" />
        </router-link>
        <div class="flex lg:hidden relative" @click="showMenu = !showMenu">
          <button
            class="
              bg-trans
              border-2 border-red-400
              outline-none
              p-1
              px-2
              py-1
              relative
              rounded-full
              shadow-lg
              text-red-500
            "
            @click="menu"
          >
            Menú
          </button>
        </div>
      </div>
      <ul
        :class="showMenu ? 'flex' : 'hidden'"
        class="
          2xl:pl-28
          flex flex-col
          grow-0
          lg:flex lg:flex-row lg:items-center lg:mt-0 lg:relative lg:space-x-10 lg:space-y-0
          md:grow-0
          mt-8
          space-x-0 space-y-4
          text-right
          xl:pl-24
        "
      >
        <li>
          <a
            href="/#inicio"
            class="
              text-lg
              font-bold
              text-gray-500
              hover:text-red-500
              bg-gray-200
              lg:bg-transparent
              rounded-lg
              pl-28
              pb-48
              pr-4
              pt-4
            "
            >Inicio</a
          >
        </li>
        <li>
          <a
            href="/#admiga"
            class="text-lg font-bold text-gray-500 hover:text-red-500 bg-gray-200 md:bg-transparent pr-4"
            >AdmiGa</a
          >
        </li>
        <li>
          <a
            href="/#funcionalidades"
            class="text-lg font-bold text-gray-500 hover:text-red-500 bg-gray-200 md:bg-transparent pr-4"
            >Funcionalidades</a
          >
        </li>
        <li>
          <a
            href="/#contactos"
            class="text-lg font-bold text-gray-500 hover:text-red-500 bg-gray-200 md:bg-transparent pr-4"
            >Contáctanos</a
          >
        </li>
        <li>
          <router-link
            to="/policies"
            class="text-lg font-bold text-gray-500 hover:text-red-500 bg-gray-200 md:bg-transparent pr-4"
            >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>

Miguel Hernandez · Accepted Answer · 2022-04-23 15:03:54Z

2

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>

answered Apr 23, 2022 at 15:03

Miguel Hernandez

212 bronze badges

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

Comments

harutyunian · Accepted Answer · 2022-04-23 13:25:29Z

0

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);

}

answered Apr 23, 2022 at 13:25

harutyunian

72 bronze badges

Collectives™ on Stack Overflow

Change the background color with vue.js scroll detection

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related