I am looking to create a fixed navbar that changes opacity based on user scrolling behavior. Initially, I want the navbar background to be transparent and then transition to white as the user scrolls down the page. An example of what I am trying to achieve can be seen here: https://codepen.io/michaeldoyle/pen/Bhsif
While I have come across examples using jQuery for this effect, I specifically need to implement it using Vue.js.
$(window).scroll(function() {
if ($(document).scrollTop() > 200) {
$('nav').addClass('transparent');
} else {
$('nav').removeClass('transparent');
}
});
I attempted to use the above code within my Vue page by placing it inside mounted(). However, this approach did not work as expected. I am seeking a solution that relies on Vue rather than 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 an example of how my navbar component is structured.
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);
}
These are the CSS styles I have implemented for this functionality.