Navbar opacity on scroll vuejs

Question

I want to change the opacity of my fixed navbar background when user scrolling the page. Initially navbar background should be transparent and when scrolling down it background needs to be change to white. Like this example https://codepen.io/michaeldoyle/pen/Bhsif

I have found various examples for this scenario using jquery. But I need to achieve this using vuejs.

$(window).scroll(function() {
  if ($(document).scrollTop() > 200) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
});

I tried above code inside my vue page. I put it inside mounted(). But it doesn't work. I need to done this using vue. Not like above jquery.

<nav class="navbar navbar-inverse">
      <ul class="nav menu">
<li>
  <router-link to="/about" @click.native="closeNavBarFromChild">About</router-link>
</li>
<li class="hidden-lg hidden-md">
  <router-link to="/product" @click.native="closeNavBarFromChild">Product</router-link>
</li>
</ul>
    </nav>

This is how my navbar component looks like.

nav.navbar{
   -webkit-transition: all 0.4s ease;
   transition: all 0.8s ease;
}

.navbar-inverse {
    background-color: rgba(255,255,255,0);
}

nav.navbar.transparent {
  background-color:rgba(0,0,0,1);
}

this is the css part that i used.

But it doesn't work - in what way? errors in the console? what doesn't work about it? — Jaromanda X
– Jaromanda X, Commented Oct 4, 2020 at 8:12
nothing appears in console. I just use jsfiddle.net/m7yww8oa/157 this simple example for testing. nothing happens. I put that jquery code inside mounted(). Is that right? — Lakshan Umesh
– Lakshan Umesh, Commented Oct 4, 2020 at 8:41

Zooly · Accepted Answer · 2020-10-04 09:32:49Z

1

Set your listener in created lifecycle hook:

export default {
  created () {
    window.addEventListener('scroll', this.onScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll (event) {
      // add/remove class
    }
  }
}

answered Oct 4, 2020 at 9:32

Zooly

4,7974 gold badges40 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Navbar opacity on scroll vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related