change background-color of navbar when scroll event with vuejs

Question

how can I change background-color of navbar when scrolling event with Vuejs. I tried V-scroll event by using this answer How to change css while scrolling in Vue this is the code but it does not work?

<nav v-scroll="handleScroll">
        <div class="logo">
          <img src="../assets/images/logo.png" alt="logo" />
          <button id="mobBtn" @click="displayList">
            <i class="fas fa-bars"></i>
          </button>
        </div>

        <ul class="navlist" id="mobList">
          <li>
            <a href>Home</a>
          </li>
          <li>
            <a href>About</a>
          </li>
          <li>
            <a href>Blog</a>
          </li>
          <li>
            <a href>Contact</a>
          </li>
        </ul>
      </nav>
<script>
export default {
  name: "Header",
  data: {},
  methods: {
  handleScroll: function (evt, el) {
    alert("Dddd")
      if (window.scrollY > 50) {
        el.setAttribute(
          'style',
          'background-color: red;'
        )
      }
      return window.scrollY > 100
    }
};
</script>

does this stackoverflow.com/questions/41095814/… answer's your question ? — Qonvex620
– Qonvex620, Commented Jan 25, 2020 at 15:43

Qonvex620 · Accepted Answer · 2020-01-25 15:53:02Z

22

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

Now in your case, put this in your navbar

<nav :class="{change_color: scrollPosition > 50}">
      ...
      ...
</nav>

and put css to your change_color class

<style scoped>
   .change_color {
       background-color:red
   }
</style

answered Jan 25, 2020 at 15:53

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

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

1 Comment

Bryan Spearman Over a year ago

This worked outstandingly for changing the Vuetify (v-app-bar) from one color to another on scroll. Thank you very much!! I did however use a computed property to update the 'color' prop for that component: appBarColor() { return this.scrollPosition > 10 ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,.5)'; } This effectively changes the app bar color from translucent to solid white as the page is scrolled. Super cool!

Collectives™ on Stack Overflow

change background-color of navbar when scroll event with vuejs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related